/* Product illustrations share geometry and elevation. Paint stays in its
   existing component so approved gradients and feature colors remain local. */
:where(.agent-detail-page--core-feature, .specialty-page) {
  --feature-ui-border-color: var(--color-border-subtle);
  --feature-ui-divider-color: var(--color-edge-chrome);
  --feature-ui-radius-panel: var(--radius-card);
  --feature-ui-radius-card: var(--radius-icon);
  --feature-ui-radius-control: 8px;
  --feature-ui-radius-icon: 8px;
  --feature-ui-radius-badge: 6px;
  --feature-ui-radius-tail: var(--space-1);
  --feature-ui-space-1: var(--space-1);
  --feature-ui-space-2: var(--space-2);
  --feature-ui-space-3: var(--space-3);
  --feature-ui-space-4: var(--space-4);
  --feature-ui-space-5: var(--space-5);
  --feature-ui-space-6: var(--space-6);
  --feature-ui-panel-shadow:
    0 2px 4px color-mix(in srgb, var(--color-text-primary) 3%, transparent),
    0 12px 28px color-mix(in srgb, var(--color-brand-green) 8%, transparent),
    inset 0 1px 0 var(--color-surface-white);
  --feature-ui-card-shadow:
    0 2px 3px color-mix(in srgb, var(--color-text-primary) 2%, transparent),
    0 5px 12px color-mix(in srgb, var(--color-brand-green) 5%, transparent),
    inset 0 1px 0 var(--color-surface-white);
  --feature-ui-control-shadow: var(--shadow-input);
  --feature-ui-svg-shadow: drop-shadow(
    0 2px 3px color-mix(in srgb, var(--color-brand-green) 6%, transparent)
  );
  --feature-ui-chrome-padding: var(--space-3) var(--space-4);
  --feature-ui-foot-padding: var(--space-3) var(--space-4);
}
/* Detail-only explanatory modules. Existing hero, demos and card layouts are unchanged. */
.knowledge-detail__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 64px;
}
.knowledge-detail--sharing .knowledge-detail__copy {
  order: 2;
}
.knowledge-detail__copy h2 {
  font-size: var(--font-heading-two);
}
.knowledge-detail__copy > p {
  margin-top: 24px;
  font-size: var(--font-body-large);
  color: var(--color-text-secondary);
  line-height: 1.8;
}
.knowledge-detail__copy ul {
  display: grid;
  gap: 18px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--font-body);
  line-height: 1.7;
  color: var(--color-text-secondary);
}
.knowledge-detail__copy li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.knowledge-detail__copy li > svg {
  flex: 0 0 18px;
  margin-top: 5px;
}
.knowledge-detail__visual {
  min-width: 0;
  margin: 0;
  padding: 24px;
  border-radius: var(--radius-panel);
  background:
    radial-gradient(
      ellipse at top left,
      rgba(255, 255, 255, 0.7),
      transparent 72%
    ),
    var(--color-accent-lime-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  container-type: inline-size;
}
.knowledge-detail__visual figcaption {
  margin-top: 14px;
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.5;
}
/* One composition at every viewport; CSS sizing is applied before hydration. */
.knowledge-detail__canvas {
  width: 560px;
  zoom: tan(atan2(100cqw, 560px));
}
.knowledge-scene {
  overflow: hidden;
  background: var(--color-surface-white);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-panel, var(--radius-card));
  box-shadow: var(--feature-ui-panel-shadow, var(--shadow-card));
  font-size: 14px;
  line-height: 1.6;
}
.knowledge-scene :is(small, .knowledge-scene__muted) {
  font-size: 13px;
  color: var(--color-text-muted);
}
.knowledge-scene strong {
  font-weight: 600;
}
.knowledge-scene svg {
  flex-shrink: 0;
}
.knowledge-scene__chrome {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 10px);
  padding: var(--feature-ui-chrome-padding, 16px 20px);
  border-bottom: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
}
.knowledge-scene__mark {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--feature-ui-radius-icon, 10px);
  background: linear-gradient(
    135deg,
    var(--color-accent-lime-soft),
    var(--color-accent-mint-soft)
  );
  flex-shrink: 0;
}
.knowledge-scene__mark svg {
  width: 19px;
  height: 19px;
}
.knowledge-scene__status {
  margin-left: auto;
  font-size: 12px;
  color: var(--color-text-muted);
}
.knowledge-scene__foot {
  display: flex;
  gap: var(--feature-ui-space-2, 8px);
  align-items: center;
  padding: var(--feature-ui-foot-padding, 14px 20px);
  border-top: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
  color: var(--color-text-muted);
  font-size: 12px;
}
.knowledge-source-workspace {
  display: grid;
  grid-template-columns: 185px 1fr;
  min-height: 305px;
}
.knowledge-source-list {
  padding: var(--feature-ui-space-5, 22px) var(--feature-ui-space-3, 12px);
  background: var(--color-page-background);
  border-right: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
}
.knowledge-source-list > span {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 8px);
  margin: 0 8px 18px;
}
.knowledge-source-item {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: var(--feature-ui-space-1, 4px) var(--feature-ui-space-2, 8px);
  padding: var(--feature-ui-space-3, 12px) var(--feature-ui-space-2, 8px);
  border-radius: var(--feature-ui-radius-card, 10px);
  margin-bottom: 8px;
  font-size: 13px;
}
.knowledge-source-item > svg {
  margin-top: 2px;
}
.knowledge-source-item small {
  grid-column: 2;
  font-size: 11px;
}
.knowledge-source-item--active {
  background: var(--color-accent-lime-soft);
}
.knowledge-source-preview {
  padding: var(--feature-ui-space-6, 24px);
}
.knowledge-source-preview h3 {
  margin: 14px 0 6px;
  font-size: 20px;
}
.knowledge-source-preview .knowledge-source-excerpt {
  background: var(--color-accent-lime-soft);
  margin: 20px 0 12px;
  padding: var(--feature-ui-space-3, 12px);
  border-radius: var(--feature-ui-radius-card, 8px);
}
.knowledge-scene__document-lines {
  display: grid;
  gap: var(--feature-ui-space-1, 6px);
  margin-top: 18px;
}
.knowledge-scene__document-lines i {
  height: 3px;
  background: var(--color-border-subtle);
  border-radius: var(--feature-ui-radius-card, 4px);
  width: 88%;
}
.knowledge-scene__document-lines i:nth-child(2) {
  width: 100%;
}
.knowledge-scene__document-lines i:last-child {
  width: 62%;
}
.knowledge-source-workflow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--feature-ui-space-5, 20px);
  padding: var(--feature-ui-space-4, 18px);
  background: var(--color-page-background);
  border-top: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
  font-size: 13px;
}
.knowledge-source-workflow svg {
  color: var(--color-text-muted);
  width: 16px;
}
.knowledge-sharing-body {
  padding: 26px var(--feature-ui-space-6, 24px);
}
.knowledge-shared-source {
  width: 330px;
  margin: auto;
  padding: var(--feature-ui-space-5, 20px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-default));
  border-radius: var(--radius-control);
  background: var(--color-page-background);
}
.knowledge-shared-source__title {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-3, 12px);
}
.knowledge-shared-source__title small {
  display: block;
  margin-top: 3px;
  font-size: 12px;
}
.knowledge-shared-documents {
  display: flex;
  gap: var(--feature-ui-space-3, 14px);
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
  font-size: 12px;
}
.knowledge-shared-documents > span {
  display: inline-flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 5px);
  white-space: nowrap;
}
.knowledge-shared-documents svg {
  width: 14px;
}
.knowledge-sharing-links {
  display: block;
  width: 100%;
  height: 46px;
}
.knowledge-shared-agents {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--feature-ui-space-3, 12px);
}
.knowledge-shared-agent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--feature-ui-space-1, 6px);
  padding: var(--feature-ui-space-4, 16px) var(--feature-ui-space-2, 8px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--radius-control);
}
.knowledge-shared-agent > span {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent-lime-soft);
  width: 36px;
  height: 36px;
  border-radius: var(--feature-ui-radius-card, 12px);
  margin-bottom: 4px;
}
.knowledge-shared-agent:nth-child(2) > span {
  background: var(--color-accent-mint-soft);
}
.knowledge-shared-agent:nth-child(3) > span {
  background: var(--color-accent-peach-soft);
}
.knowledge-shared-agent small {
  font-size: 11px;
}
.knowledge-sharing-result {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-3, 12px);
  padding: var(--feature-ui-space-3, 14px) var(--feature-ui-space-4, 16px);
  background: var(--color-accent-mint-soft);
  border-radius: var(--feature-ui-radius-card, 12px);
  margin-top: 22px;
}
.knowledge-sharing-result small {
  display: block;
  font-size: 12px;
  margin-top: 2px;
}
.knowledge-verification-body {
  padding: var(--feature-ui-space-5, 20px);
}
.knowledge-test-question {
  margin-left: 72px;
  padding: var(--feature-ui-space-3, 12px) var(--feature-ui-space-4, 16px);
  background: var(--color-surface-inverse);
  color: var(--color-surface-white);
  border-radius: var(--feature-ui-radius-card, 14px)
    var(--feature-ui-radius-card, 14px) var(--feature-ui-radius-tail, 4px)
    var(--feature-ui-radius-card, 14px);
}
.knowledge-test-answer {
  margin-top: 18px;
  padding: var(--feature-ui-space-4, 16px);
  background: var(--color-page-background);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 14px);
}
.knowledge-test-answer > strong {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 8px);
}
.knowledge-test-answer .knowledge-scene__mark {
  width: 24px;
  height: 24px;
  border-radius: var(--feature-ui-radius-icon, 7px);
}
.knowledge-test-answer .knowledge-scene__mark svg {
  width: 16px;
  height: 16px;
}
.knowledge-test-answer > p {
  margin-top: 12px;
}
.knowledge-test-citation {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 6px);
  margin-top: 12px;
  color: var(--color-text-muted);
  font-size: 12px;
}
.knowledge-test-citation svg {
  width: 14px;
}
.knowledge-test-evidence {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--feature-ui-space-4, 18px);
  padding: var(--feature-ui-space-4, 16px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-left: 3px solid var(--color-accent-mint);
  border-radius: var(--feature-ui-radius-card, 12px);
}
.knowledge-test-evidence blockquote {
  margin: 8px 0 0;
  white-space: pre-line;
  font-size: 13px;
  line-height: 1.8;
}
.knowledge-test-evidence ul {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  font-size: 12px;
}
.knowledge-test-evidence li {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 6px);
  line-height: 1.9;
}
.knowledge-test-evidence li svg {
  width: 13px;
  height: 13px;
}
.knowledge-test-cycle {
  justify-content: space-between;
  gap: var(--feature-ui-space-2, 10px);
  background: var(--color-page-background);
}
.knowledge-test-cycle svg {
  width: 14px;
  height: 14px;
}
@media (min-width: 810px) and (max-width: 1199.98px) {
  .knowledge-detail__layout {
    gap: 32px;
  }
  .knowledge-detail__visual {
    padding: 18px;
  }
}
@media (max-width: 809.98px) {
  .knowledge-detail__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-content-gap);
  }
  .knowledge-detail--sharing .knowledge-detail__copy {
    order: 0;
  }
  .knowledge-detail__copy .product-eyebrow {
    margin-bottom: 12px;
  }
  .knowledge-detail__copy > p {
    font-size: var(--font-body-large);
    margin-top: var(--space-heading-gap);
    line-height: 1.7;
  }
  .knowledge-detail__copy ul {
    font-size: var(--font-body);
    gap: 12px;
    margin-top: 20px;
  }
  .knowledge-detail__visual {
    padding: 14px;
    border-radius: var(--radius-card);
  }
  .knowledge-detail__visual figcaption {
    margin-top: 10px;
    font-size: 11px;
  }
}
/* Full product compositions scale together at every viewport. */
.conversation-detail__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 64px;
}
.conversation-detail--reverse .conversation-detail__copy {
  order: 2;
}
.conversation-detail__copy h2 {
  font-size: var(--font-heading-two);
}
.conversation-detail__copy > p {
  margin-top: 24px;
  font-size: var(--font-body-large);
  color: var(--color-text-secondary);
  line-height: 1.8;
}
.conversation-detail__copy ul {
  display: grid;
  gap: 18px;
  padding: 0;
  margin: 28px 0 0;
  list-style: none;
  font-size: var(--font-body);
  line-height: 1.7;
  color: var(--color-text-secondary);
}
.conversation-detail__copy li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.conversation-detail__copy li > svg {
  flex: 0 0 18px;
  margin-top: 5px;
}
.conversation-detail__visual {
  min-width: 0;
  margin: 0;
  padding: 24px;
  border-radius: var(--radius-panel);
  background:
    radial-gradient(
      ellipse at top left,
      rgba(255, 255, 255, 0.7),
      transparent 72%
    ),
    var(--color-accent-mint-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  container-type: inline-size;
}
.conversation-detail--inbox .conversation-detail__visual {
  background-color: var(--color-accent-peach-soft);
}
.conversation-detail__visual figcaption {
  margin-top: 14px;
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.5;
}
.conversation-detail__canvas {
  width: 560px;
  zoom: tan(atan2(100cqw, 560px));
}
.conversation-scene {
  overflow: hidden;
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-panel, var(--radius-card));
  background: var(--color-surface-white);
  box-shadow: var(--feature-ui-panel-shadow, var(--shadow-card));
  color: var(--color-text-primary);
  font-size: 14px;
  line-height: 1.6;
}
.conversation-scene strong {
  font-weight: 600;
}
.conversation-scene small {
  font-size: 12px;
  color: var(--color-text-muted);
}
.conversation-scene svg {
  flex-shrink: 0;
}
.conversation-scene p {
  margin: 0;
}
.conversation-scene__chrome {
  display: flex;
  gap: var(--feature-ui-space-2, 10px);
  align-items: center;
  padding: var(--feature-ui-chrome-padding, 16px 20px);
  border-bottom: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
}
.conversation-scene__chrome > small {
  margin-left: auto;
}
.conversation-scene__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: var(--feature-ui-radius-icon, 9px);
  background: linear-gradient(
    135deg,
    var(--color-accent-lime-soft),
    var(--color-accent-mint-soft)
  );
}
.conversation-scene__mark svg {
  width: 18px;
  height: 18px;
}
.conversation-scene__body {
  padding: var(--feature-ui-space-5, 22px);
}
.conversation-scene__foot {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 8px);
  padding: var(--feature-ui-foot-padding, 13px 20px);
  border-top: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
  color: var(--color-text-muted);
  font-size: 12px;
}
.conversation-scene__foot > svg {
  width: 14px;
  height: 14px;
}
.conversation-mode {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--feature-ui-space-4, 15px) var(--feature-ui-space-4, 16px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-default));
  border-radius: var(--feature-ui-radius-card, 12px);
  background: var(--color-page-background);
}
.conversation-mode small {
  display: block;
  margin-top: 4px;
}
.conversation-switch {
  display: block;
  padding: 3px;
  width: 38px;
  border-radius: 20px;
  background: var(--color-accent-mint);
}
.conversation-switch i {
  display: block;
  width: 17px;
  height: 17px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--color-surface-white);
  box-shadow: var(--feature-ui-control-shadow, 0 1px 3px rgba(0, 0, 0, 0.12));
}
.conversation-rule-heading {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 8px);
  margin: 18px 0 10px;
}
.conversation-rules {
  display: grid;
  gap: var(--feature-ui-space-1, 5px);
  padding: var(--feature-ui-space-3, 12px) var(--feature-ui-space-4, 16px)
    var(--feature-ui-space-3, 12px) 32px;
  margin: 0;
  list-style: disc;
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 10px);
  background: var(--color-page-background);
  font-size: 13px;
}
.conversation-rules li::marker {
  color: var(--color-text-muted);
}
.conversation-team {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
}
.conversation-team > span {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 10px);
  padding: var(--feature-ui-space-2, 8px) var(--feature-ui-space-3, 12px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-default));
  border-radius: var(--feature-ui-radius-card, 9px);
}
.conversation-team strong {
  margin-right: 24px;
}
.conversation-alternative {
  padding: var(--feature-ui-space-3, 13px) var(--feature-ui-space-4, 16px);
  margin-top: 18px;
  border-radius: var(--feature-ui-radius-card, 12px);
  background: var(--color-accent-lime-soft);
}
.conversation-alternative strong {
  font-size: 13px;
}
.conversation-alternative p {
  margin-top: 3px;
  color: var(--color-text-secondary);
  font-size: 12px;
}
.conversation-assignment {
  padding: 26px var(--feature-ui-space-5, 22px);
}
.conversation-assignment__head,
.conversation-assignment__row {
  display: grid;
  grid-template-columns: 100px 160px 1fr;
  gap: var(--feature-ui-space-3, 12px);
  align-items: center;
}
.conversation-assignment__head {
  padding: 0 var(--feature-ui-space-3, 12px) var(--feature-ui-space-3, 14px);
}
.conversation-assignment__row {
  padding: var(--feature-ui-space-5, 20px) var(--feature-ui-space-3, 12px);
  border: 1px solid var(--feature-ui-divider-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 14px);
  margin-bottom: 12px;
}
.conversation-assignment__row:last-child {
  margin-bottom: 0;
}
.conversation-assignment__from {
  color: var(--color-text-secondary);
}
.conversation-assignment__action {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 7px);
  font-weight: 500;
}
.conversation-assignment__action > svg:last-child {
  margin-left: auto;
  color: var(--color-text-muted);
  width: 15px;
}
.conversation-assignment__to {
  display: block;
  padding: var(--feature-ui-space-2, 9px) var(--feature-ui-space-2, 10px);
  border-radius: var(--feature-ui-radius-card, 10px);
}
.conversation-assignment__to small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
}
.conversation-assignment__row--mint .conversation-assignment__to {
  background: var(--color-accent-mint-soft);
}
.conversation-assignment__row--peach .conversation-assignment__to {
  background: var(--color-accent-peach-soft);
}
.conversation-assignment__row--lime .conversation-assignment__to {
  background: var(--color-accent-lime-soft);
}
.conversation-context {
  display: grid;
  grid-template-columns: 1fr 170px;
}
.conversation-context__thread {
  padding: var(--feature-ui-space-5, 20px) var(--feature-ui-space-4, 18px);
}
.conversation-context__info {
  padding: var(--feature-ui-space-5, 22px) var(--feature-ui-space-4, 16px);
  border-left: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
  background: var(--color-page-background);
}
.conversation-facts {
  display: grid;
  gap: var(--feature-ui-space-4, 16px);
  margin: 18px 0 0;
}
.conversation-facts dt {
  color: var(--color-text-muted);
  font-size: 12px;
}
.conversation-facts dd {
  margin: 3px 0 0;
  font-size: 13px;
}
.conversation-scene .conversation-bubble {
  padding: var(--feature-ui-space-3, 12px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 13px)
    var(--feature-ui-radius-card, 13px) var(--feature-ui-radius-card, 13px)
    var(--feature-ui-radius-tail, 3px);
  margin-bottom: 14px;
  font-size: 13px;
}
.conversation-scene .conversation-bubble--customer {
  margin-left: 26px;
  background: var(--color-surface-inverse);
  color: var(--color-surface-white);
  border-radius: var(--feature-ui-radius-card, 13px)
    var(--feature-ui-radius-card, 13px) var(--feature-ui-radius-tail, 3px)
    var(--feature-ui-radius-card, 13px);
}
.conversation-context__attachment {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 8px);
  padding: var(--feature-ui-space-2, 8px) var(--feature-ui-space-3, 12px);
  border-radius: var(--feature-ui-radius-card, 9px);
  background: var(--color-page-background);
  margin-left: 128px;
  font-size: 12px;
}
.conversation-context__reply {
  text-align: right;
  color: var(--color-text-secondary);
  font-size: 12px;
  padding-top: 6px;
}
.conversation-context__event {
  display: flex;
  gap: var(--feature-ui-space-1, 6px);
  align-items: center;
  font-size: 11px;
  margin: 18px 0;
  padding-top: 14px;
  border-top: 1px dashed var(--color-border-default);
  color: var(--color-text-muted);
}
.conversation-context__event > svg {
  width: 14px;
  height: 14px;
}
.conversation-scene .conversation-bubble--human {
  margin-bottom: 0;
  background: var(--color-accent-mint-soft);
}
.conversation-overview__toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--feature-ui-space-3, 12px) var(--feature-ui-space-4, 18px);
  border-bottom: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
  font-size: 12px;
}
.conversation-overview__toolbar > div {
  display: flex;
  gap: var(--feature-ui-space-1, 6px);
}
.conversation-overview__toolbar > div span {
  padding: var(--feature-ui-space-1, 6px) var(--feature-ui-space-3, 12px);
  border-radius: var(--feature-ui-radius-card, 8px);
  color: var(--color-text-muted);
}
.conversation-overview__toolbar > div .is-active {
  color: var(--color-text-primary);
  background: var(--color-accent-lime-soft);
}
.conversation-overview__toolbar > span {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 7px);
}
.conversation-overview__toolbar svg {
  width: 14px;
  height: 14px;
}
.conversation-overview__head,
.conversation-overview__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px 88px;
  gap: var(--feature-ui-space-3, 12px);
  align-items: center;
  padding: var(--feature-ui-space-3, 12px) var(--feature-ui-space-4, 18px);
}
.conversation-overview__head {
  background: var(--color-page-background);
}
.conversation-overview__row {
  min-height: 68px;
  border-top: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
}
.conversation-overview__row.is-active {
  background: color-mix(in srgb, var(--color-accent-mint-soft) 33%, white);
  box-shadow: inset 3px 0 var(--color-accent-mint);
}
.conversation-overview__customer {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 9px);
  min-width: 0;
}
.conversation-overview__customer > div {
  min-width: 0;
}
.conversation-overview__customer small {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-top: 3px;
  font-size: 11px;
}
.conversation-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
  flex-shrink: 0;
}
.conversation-avatar--mint {
  background: var(--color-accent-mint-soft);
}
.conversation-avatar--peach {
  background: var(--color-accent-peach-soft);
}
.conversation-avatar--lime {
  background: var(--color-accent-lime-soft);
}
.conversation-overview__agent {
  color: var(--color-text-secondary);
  font-size: 12px;
}
.conversation-handler {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 5px);
  width: fit-content;
  font-size: 11px;
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 7px);
  padding: var(--feature-ui-space-1, 4px) var(--feature-ui-space-2, 7px);
  background: var(--color-surface-white);
}
.conversation-handler i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-text-secondary);
}
.conversation-handler--lime i {
  background: var(--color-accent-mint);
}
.conversation-handler--peach i {
  background: var(--color-accent-peach);
}
.conversation-filter-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--feature-ui-space-3, 14px);
  padding: var(--feature-ui-space-5, 20px) var(--feature-ui-space-5, 20px)
    var(--feature-ui-space-3, 14px);
}
.conversation-filter-fields small {
  display: block;
  margin-bottom: 6px;
}
.conversation-filter-fields span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--feature-ui-space-2, 8px) var(--feature-ui-space-2, 10px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-default));
  border-radius: var(--feature-ui-radius-control, 8px);
  font-size: 12px;
}
.conversation-filter-fields svg {
  width: 14px;
  height: 14px;
}
.conversation-filter-apply {
  display: flex;
  justify-content: flex-end;
  padding: 0 var(--feature-ui-space-5, 20px) var(--feature-ui-space-4, 18px);
}
.conversation-filter-apply > span {
  display: inline-flex;
  gap: var(--feature-ui-space-2, 7px);
  align-items: center;
  padding: var(--feature-ui-space-2, 7px) var(--feature-ui-space-3, 12px);
  border-radius: var(--feature-ui-radius-control, 8px);
  background: var(--color-surface-inverse);
  color: var(--color-surface-white);
  font-size: 12px;
}
.conversation-filter-apply svg {
  width: 14px;
  height: 14px;
}
.conversation-filter-result {
  display: grid;
  grid-template-columns: 1fr 205px;
  border-top: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
}
.conversation-filter-result__preview {
  padding: var(--feature-ui-space-5, 20px);
}
.conversation-customer-title {
  display: flex;
  gap: var(--feature-ui-space-2, 9px);
  align-items: center;
  margin: 14px 0;
}
.conversation-filter-result__preview > strong {
  font-size: 13px;
}
.conversation-filter-result__preview p {
  margin-top: 12px;
  padding: var(--feature-ui-space-3, 12px);
  border-radius: var(--feature-ui-radius-control, 12px);
  background: var(--color-accent-mint-soft);
  color: var(--color-text-secondary);
  font-size: 12px;
}
.conversation-filter-result > aside {
  padding: var(--feature-ui-space-5, 20px);
  border-left: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
  background: var(--color-page-background);
}
.conversation-filter-result .conversation-facts {
  gap: var(--feature-ui-space-2, 8px);
  margin-top: 12px;
}
.conversation-filter-result .conversation-facts > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.conversation-filter-result .conversation-facts dd {
  margin: 0;
  font-size: 12px;
}
.conversation-lifecycle {
  padding: var(--feature-ui-space-5, 22px);
}
.conversation-timeline {
  display: grid;
  gap: var(--feature-ui-space-3, 14px);
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
}
.conversation-timeline li {
  position: relative;
  display: flex;
  gap: var(--feature-ui-space-3, 12px);
  align-items: flex-start;
}
.conversation-timeline li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 15px;
  top: 34px;
  height: 27px;
  border-left: 1px solid
    var(--feature-ui-divider-color, var(--color-border-default));
}
.conversation-timeline__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--feature-ui-border-color, var(--color-border-default));
  border-radius: 50%;
  background: var(--color-page-background);
}
.conversation-timeline li:last-child .conversation-timeline__icon {
  background: var(--color-accent-mint-soft);
}
.conversation-timeline small {
  display: block;
  margin-top: 2px;
}
.conversation-timeline time {
  margin-left: auto;
  color: var(--color-text-muted);
  font-size: 12px;
}
.conversation-close {
  padding: var(--feature-ui-space-3, 14px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-default));
  border-radius: var(--feature-ui-radius-card, 14px);
  background: var(--color-page-background);
}
.conversation-close__heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}
.conversation-close__heading > span {
  display: inline-flex;
  gap: var(--feature-ui-space-1, 5px);
  align-items: center;
  padding: 3px var(--feature-ui-space-2, 8px);
  border-radius: var(--feature-ui-radius-card, 7px);
  background: var(--color-accent-lime-soft);
  font-size: 11px;
}
.conversation-close__heading svg {
  width: 13px;
  height: 13px;
}
.conversation-close > small {
  display: block;
  margin-bottom: 5px;
}
.conversation-close__reason {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--feature-ui-space-2, 8px) var(--feature-ui-space-3, 12px);
  background: var(--color-surface-white);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 8px);
  font-size: 13px;
  margin-bottom: 12px;
}
.conversation-close p {
  font-size: 13px;
  color: var(--color-text-secondary);
}
@media (min-width: 810px) and (max-width: 1199.98px) {
  .conversation-detail__layout {
    gap: 32px;
  }
  .conversation-detail__visual {
    padding: 18px;
  }
}
@media (max-width: 809.98px) {
  .conversation-detail__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-content-gap);
  }
  .conversation-detail--reverse .conversation-detail__copy {
    order: 0;
  }
  .conversation-detail__copy .product-eyebrow {
    margin-bottom: 12px;
  }
  .conversation-detail__copy > p {
    font-size: var(--font-body-large);
    margin-top: var(--space-heading-gap);
    line-height: 1.7;
  }
  .conversation-detail__copy ul {
    font-size: var(--font-body);
    gap: 12px;
    margin-top: 20px;
  }
  .conversation-detail__visual {
    padding: 14px;
    border-radius: var(--radius-card);
  }
  .conversation-detail__visual figcaption {
    margin-top: 10px;
    font-size: 11px;
  }
}
.lead-detail__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 64px;
}
.lead-detail--reverse .lead-detail__copy {
  order: 2;
}
.lead-detail__copy h2 {
  font-size: var(--font-heading-two);
}
.lead-detail__copy h2 > span {
  display: inline-block;
}
.lead-detail__copy > p {
  margin-top: 24px;
  font-size: var(--font-body-large);
  color: var(--color-text-secondary);
  line-height: 1.8;
}
.lead-detail__copy ul {
  display: grid;
  gap: 18px;
  padding: 0;
  margin: 28px 0 0;
  list-style: none;
  font-size: var(--font-body);
  line-height: 1.7;
  color: var(--color-text-secondary);
}
.lead-detail__copy li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.lead-detail__copy li > svg {
  flex: 0 0 18px;
  margin-top: 5px;
}
.lead-detail__visual {
  min-width: 0;
  margin: 0;
  padding: 24px;
  border-radius: var(--radius-panel);
  background:
    radial-gradient(
      ellipse at top left,
      rgba(255, 255, 255, 0.7),
      transparent 72%
    ),
    var(--color-accent-lavender-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  container-type: inline-size;
}
.lead-detail__visual figcaption {
  margin-top: 14px;
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.5;
}
.lead-detail__canvas {
  width: 560px;
  zoom: tan(atan2(100cqw, 560px));
}
.lead-scene {
  overflow: hidden;
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-panel, var(--radius-card));
  background: var(--color-surface-white);
  box-shadow: var(--feature-ui-panel-shadow, var(--shadow-card));
  color: var(--color-text-primary);
  font-size: 14px;
  line-height: 1.6;
}
.lead-scene strong {
  font-weight: 600;
}
.lead-scene small {
  font-size: 12px;
  color: var(--color-text-muted);
}
.lead-scene svg {
  flex-shrink: 0;
}
.lead-scene p {
  margin: 0;
}
.lead-scene__chrome {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 10px);
  padding: var(--feature-ui-chrome-padding, 16px 20px);
  border-bottom: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
}
.lead-scene__chrome > small {
  margin-left: auto;
  white-space: nowrap;
}
.lead-scene__mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--feature-ui-radius-icon, 9px);
  background: linear-gradient(
    135deg,
    var(--color-accent-lime-soft),
    var(--color-accent-mint-soft)
  );
}
.lead-scene__mark svg {
  width: 18px;
  height: 18px;
}
.lead-scene__foot {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 8px);
  padding: var(--feature-ui-foot-padding, 13px 20px);
  border-top: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
  color: var(--color-text-muted);
  font-size: 12px;
}
.lead-scene__foot svg {
  width: 14px;
  height: 14px;
}
.lead-capture-layout {
  display: grid;
  grid-template-columns: 185px minmax(0, 1fr);
}
.lead-capture-settings {
  padding: var(--feature-ui-space-5, 22px) var(--feature-ui-space-4, 16px);
  border-right: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
  background: var(--color-page-background);
}
.lead-capture-settings > strong {
  font-size: 13px;
}
.lead-capture-fields {
  display: grid;
  gap: var(--feature-ui-space-1, 6px);
  margin: 14px 0 0;
}
.lead-capture-fields > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--feature-ui-space-1, 6px);
  padding: var(--feature-ui-space-1, 5px) var(--feature-ui-space-2, 8px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-control, 8px);
  background: var(--color-surface-white);
}
.lead-capture-fields dt {
  display: flex;
  align-items: baseline;
  gap: var(--feature-ui-space-1, 4px);
  font-size: 12px;
  line-height: 1.4;
}
.lead-capture-fields dt small {
  font-size: 9px;
  white-space: nowrap;
}
.lead-capture-fields dd {
  margin: 0;
  padding: 1px var(--feature-ui-space-1, 6px);
  border-radius: var(--feature-ui-radius-control, 5px);
  background: var(--color-surface-subtle);
  color: var(--color-text-muted);
  font-size: 11px;
}
.lead-capture-fields dd.is-required {
  color: var(--color-text-primary);
  background: var(--color-accent-lavender-soft);
}
.lead-capture-guidance {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
}
.lead-capture-guidance p {
  margin-top: 6px;
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.7;
}
.lead-capture-thread {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--feature-ui-space-3, 13px);
  padding: var(--feature-ui-space-5, 20px);
}
.lead-capture-thread > small {
  margin-bottom: 1px;
}
.lead-bubble {
  padding: var(--feature-ui-space-3, 12px) var(--feature-ui-space-3, 14px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 13px)
    var(--feature-ui-radius-card, 13px) var(--feature-ui-radius-card, 13px)
    var(--feature-ui-radius-tail, 3px);
  background: var(--color-surface-white);
  font-size: 13px;
}
.lead-bubble--customer {
  align-self: flex-end;
  color: var(--color-surface-white);
  background: var(--color-surface-inverse);
  border-color: var(--color-surface-inverse);
  border-radius: var(--feature-ui-radius-card, 13px)
    var(--feature-ui-radius-card, 13px) var(--feature-ui-radius-tail, 3px)
    var(--feature-ui-radius-card, 13px);
}
.lead-bubble--reply {
  align-self: flex-end;
  background: var(--color-surface-subtle);
  border-radius: var(--feature-ui-radius-card, 13px)
    var(--feature-ui-radius-card, 13px) var(--feature-ui-radius-tail, 3px)
    var(--feature-ui-radius-card, 13px);
}
.lead-capture-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--feature-ui-space-2, 7px);
  color: var(--color-text-muted);
  font-size: 12px;
  padding: 2px 3px;
}
.lead-capture-consent svg {
  width: 14px;
  height: 14px;
  margin-top: 3px;
}
.lead-bubble--confirmed {
  display: flex;
  gap: var(--feature-ui-space-2, 8px);
  align-items: center;
  align-self: flex-end;
  background: var(--color-accent-lime-soft);
  border-color: transparent;
  border-radius: var(--feature-ui-radius-card, 13px)
    var(--feature-ui-radius-card, 13px) var(--feature-ui-radius-tail, 3px)
    var(--feature-ui-radius-card, 13px);
}
.lead-people-tabs {
  display: flex;
  gap: var(--feature-ui-space-1, 6px);
  padding: var(--feature-ui-space-3, 12px) var(--feature-ui-space-5, 20px);
  border-bottom: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
}
.lead-people-tabs span {
  padding: var(--feature-ui-space-1, 4px) var(--feature-ui-space-3, 12px);
  color: var(--color-text-muted);
  font-size: 12px;
  border-radius: var(--feature-ui-radius-control, 7px);
}
.lead-people-tabs span.is-active {
  background: var(--color-accent-lavender-soft);
  color: var(--color-text-primary);
}
.lead-people-layout {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
}
.lead-people-list {
  background: var(--color-page-background);
  border-right: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
}
.lead-people-search {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 7px);
  padding: var(--feature-ui-space-3, 14px) var(--feature-ui-space-3, 12px);
  border-bottom: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
}
.lead-people-search svg {
  width: 14px;
  height: 14px;
  color: var(--color-text-muted);
}
.lead-people-search small {
  font-size: 11px;
}
.lead-person {
  display: flex;
  align-items: flex-start;
  gap: var(--feature-ui-space-2, 9px);
  padding: var(--feature-ui-space-4, 16px) var(--feature-ui-space-3, 12px);
  border-bottom: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
}
.lead-person.is-active {
  background: var(--color-accent-mint-soft);
  box-shadow: inset 3px 0 var(--color-text-secondary);
}
.lead-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--color-accent-lavender-soft);
  font-size: 11px;
}
.lead-person > div {
  min-width: 0;
}
.lead-person strong {
  display: block;
  font-size: 12px;
}
.lead-person small {
  display: block;
  margin-top: 2px;
  font-size: 10px;
}
.lead-person > div > span {
  display: inline-block;
  margin-top: 7px;
  padding: 0 var(--feature-ui-space-1, 5px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-default));
  border-radius: var(--feature-ui-radius-card, 4px);
  color: var(--color-text-secondary);
  font-size: 10px;
}
.lead-profile {
  padding: var(--feature-ui-space-4, 18px);
}
.lead-profile-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--feature-ui-space-2, 8px);
}
.lead-profile-heading strong {
  font-size: 17px;
}
.lead-profile-heading small {
  display: block;
  margin-top: 2px;
}
.lead-profile-heading > span {
  padding: 2px var(--feature-ui-space-2, 7px);
  border-radius: var(--feature-ui-radius-card, 5px);
  font-size: 11px;
  background: var(--color-accent-lavender-soft);
}
.lead-profile-facts {
  display: grid;
  gap: var(--feature-ui-space-1, 6px);
  padding: var(--feature-ui-space-4, 15px) 0;
  margin: 0;
}
.lead-profile-facts > div {
  display: flex;
  gap: var(--feature-ui-space-3, 12px);
  align-items: baseline;
}
.lead-profile-facts dt {
  flex: 0 0 64px;
  color: var(--color-text-muted);
  font-size: 12px;
  white-space: nowrap;
}
.lead-profile-facts dd {
  margin: 0;
  font-size: 12px;
}
.lead-profile-summary {
  padding: var(--feature-ui-space-3, 12px);
  border-radius: var(--feature-ui-radius-card, 10px);
  background: linear-gradient(
    130deg,
    var(--color-accent-lavender-soft),
    var(--color-surface-white)
  );
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
}
.lead-profile-summary > strong {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 7px);
  font-size: 12px;
}
.lead-profile-summary svg {
  width: 15px;
  height: 15px;
}
.lead-profile-summary p {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--color-text-secondary);
}
.lead-profile-history {
  margin-top: 15px;
}
.lead-profile-history > strong {
  font-size: 12px;
}
.lead-profile-history > div {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 7px);
  padding: var(--feature-ui-space-2, 9px) 0;
  border-bottom: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
  font-size: 11px;
}
.lead-profile-history svg {
  width: 14px;
  height: 14px;
  color: var(--color-text-muted);
}
.lead-profile-history small {
  margin-left: auto;
  font-size: 10px;
}
.lead-profile-promotion {
  display: flex;
  gap: var(--feature-ui-space-2, 7px);
  align-items: center;
  margin-top: 15px;
  color: var(--color-text-muted);
  font-size: 11px;
}
.lead-profile-promotion svg {
  width: 14px;
  height: 14px;
}
.lead-crm-body {
  padding: var(--feature-ui-space-5, 20px);
}
.lead-crm-source {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-3, 12px);
  padding: var(--feature-ui-space-3, 14px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 12px);
  background: var(--color-page-background);
}
.lead-crm-source .lead-avatar {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
}
.lead-crm-source > div {
  display: flex;
  flex-direction: column;
}
.lead-crm-source > div > small {
  font-size: 11px;
}
.lead-crm-source > div > span {
  color: var(--color-text-secondary);
  font-size: 12px;
}
.lead-crm-source .lead-crm-source-tags {
  margin-left: auto;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--feature-ui-space-1, 5px);
  max-width: 132px;
}
.lead-crm-source .lead-crm-source-tags > span {
  padding: 2px var(--feature-ui-space-1, 6px);
  border-radius: var(--feature-ui-radius-badge, 5px);
  background: var(--color-surface-white);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  font-size: 10px;
}
.lead-crm-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--feature-ui-space-2, 8px);
  padding: var(--feature-ui-space-4, 15px) 0;
  color: var(--color-text-muted);
  font-size: 12px;
}
.lead-crm-flow svg {
  height: 21px;
}
.lead-crm-targets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--feature-ui-space-3, 12px);
}
.lead-crm-target {
  min-width: 0;
  padding: var(--feature-ui-space-4, 15px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 12px);
}
.lead-crm-brand {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 10px);
  padding-bottom: 12px;
  border-bottom: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
}
.lead-crm-brand strong {
  font-size: 16px;
}
.lead-crm-record {
  display: block;
  margin-top: 12px;
  font-size: 12px;
}
.lead-crm-target ul {
  display: grid;
  gap: var(--feature-ui-space-2, 8px);
  margin: 10px 0 14px;
  padding: 0;
  list-style: none;
}
.lead-crm-target li {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 6px);
  color: var(--color-text-secondary);
  font-size: 11px;
}
.lead-crm-target li svg {
  width: 13px;
  height: 13px;
}
.lead-crm-note {
  padding: var(--feature-ui-space-2, 9px) var(--feature-ui-space-2, 10px);
  border-radius: var(--feature-ui-radius-card, 8px);
  background: var(--color-surface-subtle);
}
.lead-crm-note small {
  font-size: 11px;
}
.lead-crm-note p {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.65;
}
.lead-crm-manual {
  display: flex;
  align-items: flex-start;
  gap: var(--feature-ui-space-2, 9px);
  margin-top: 16px;
  padding: var(--feature-ui-space-3, 13px) var(--feature-ui-space-3, 14px);
  border-radius: var(--feature-ui-radius-card, 10px);
  background: var(--color-accent-lime-soft);
}
.lead-crm-manual > svg {
  margin-top: 2px;
}
.lead-crm-manual strong {
  font-size: 12px;
}
.lead-crm-manual p {
  margin-top: 3px;
  font-size: 11px;
  color: var(--color-text-secondary);
}

@media (min-width: 810px) and (max-width: 1199.98px) {
  .lead-detail__layout {
    gap: 32px;
  }
  .lead-detail__visual {
    padding: 18px;
  }
}
@media (max-width: 809.98px) {
  .lead-detail__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-content-gap);
  }
  .lead-detail--reverse .lead-detail__copy {
    order: 0;
  }
  .lead-detail__copy .product-eyebrow {
    margin-bottom: 12px;
  }
  .lead-detail__copy > p {
    font-size: var(--font-body-large);
    margin-top: var(--space-heading-gap);
    line-height: 1.7;
  }
  .lead-detail__copy ul {
    font-size: var(--font-body);
    gap: 12px;
    margin-top: 20px;
  }
  .lead-detail__visual {
    padding: 14px;
    border-radius: var(--radius-card);
  }
  .lead-detail__visual figcaption {
    margin-top: 10px;
    font-size: 11px;
  }
}
.help-detail__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 64px;
}
.help-detail--reverse .help-detail__copy {
  order: 2;
}
.help-detail__copy h2 {
  font-size: var(--font-heading-two);
}
.help-detail__copy > p {
  margin-top: 24px;
  font-size: var(--font-body-large);
  line-height: 1.8;
  color: var(--color-text-secondary);
}
.help-detail__copy ul {
  display: grid;
  gap: 18px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--font-body);
  line-height: 1.7;
  color: var(--color-text-secondary);
}
.help-detail__copy li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.help-detail__copy li > svg {
  flex: 0 0 18px;
  margin-top: 5px;
}
.help-detail__visual {
  min-width: 0;
  margin: 0;
  padding: 24px;
  border-radius: var(--radius-panel);
  background:
    radial-gradient(
      ellipse at top left,
      rgba(255, 255, 255, 0.7),
      transparent 72%
    ),
    var(--color-accent-sky-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  container-type: inline-size;
}
.help-detail__visual figcaption {
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-muted);
}
.help-detail__canvas {
  width: 560px;
  zoom: tan(atan2(100cqw, 560px));
}
.help-scene {
  overflow: hidden;
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-panel, var(--radius-card));
  background: var(--color-surface-white);
  color: var(--color-text-primary);
  box-shadow: var(--feature-ui-panel-shadow, var(--shadow-card));
  font-size: 14px;
  line-height: 1.6;
}
.help-scene strong {
  font-weight: 600;
}
.help-scene small {
  font-size: 12px;
  color: var(--color-text-muted);
}
.help-scene svg {
  flex-shrink: 0;
}
.help-scene p {
  margin: 0;
}
.help-scene__chrome {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 10px);
  padding: var(--feature-ui-chrome-padding, 16px 20px);
  border-bottom: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
}
.help-scene__chrome > small {
  margin-left: auto;
}
.help-scene__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--feature-ui-radius-icon, 9px);
  background: linear-gradient(
    135deg,
    var(--color-accent-lime-soft),
    var(--color-accent-mint-soft)
  );
}
.help-scene__mark svg {
  width: 18px;
  height: 18px;
}
.help-scene__foot {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 8px);
  padding: var(--feature-ui-foot-padding, 13px 20px);
  border-top: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
  color: var(--color-text-muted);
  font-size: 12px;
}
.help-scene__foot svg {
  width: 14px;
  height: 14px;
}
.help-authoring__sources {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--feature-ui-space-2, 8px);
  padding: var(--feature-ui-space-4, 16px);
  border-bottom: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
}
.help-authoring__sources > span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--feature-ui-space-1, 6px);
  padding: var(--feature-ui-space-2, 7px) 3px;
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 8px);
  font-size: 12px;
  background: var(--color-page-background);
  white-space: nowrap;
}
.help-authoring__sources svg {
  width: 14px;
  height: 14px;
}
.help-authoring__workspace {
  display: grid;
  grid-template-columns: 194px minmax(0, 1fr);
}
.help-authoring__list {
  padding: var(--feature-ui-space-4, 18px) var(--feature-ui-space-3, 12px);
  border-right: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
  background: var(--color-page-background);
}
.help-authoring__list > small {
  display: block;
  margin: 0 7px 14px;
}
.help-authoring__item {
  padding: var(--feature-ui-space-3, 13px) var(--feature-ui-space-2, 9px);
  margin-bottom: 10px;
  border-radius: var(--feature-ui-radius-card, 10px);
}
.help-authoring__item.is-active {
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  background: var(--color-surface-white);
  box-shadow: var(--feature-ui-card-shadow, 0 3px 9px rgba(14, 35, 23, 0.04));
}
.help-authoring__item > strong {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 6px);
  font-size: 13px;
}
.help-authoring__item > strong svg {
  width: 15px;
  height: 15px;
}
.help-authoring__item > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--feature-ui-space-1, 5px);
  margin-top: 8px;
}
.help-authoring__item > div > span {
  padding: 2px var(--feature-ui-space-1, 6px);
  border-radius: var(--feature-ui-radius-card, 5px);
  background: var(--color-accent-butter-soft);
  font-size: 10px;
}
.help-authoring__item > div > .is-published {
  background: var(--color-accent-mint-soft);
}
.help-authoring__editor {
  padding: var(--feature-ui-space-4, 18px);
}
.help-authoring__title {
  display: block;
  margin-top: 5px;
  font-size: 19px;
}
.help-authoring__category {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 10px);
  margin-block: 14px;
  font-size: 12px;
  color: var(--color-text-muted);
}
.help-authoring__category strong {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-6, 24px);
  color: var(--color-text-primary);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-default));
  border-radius: var(--feature-ui-radius-card, 7px);
  padding: var(--feature-ui-space-1, 5px) var(--feature-ui-space-2, 9px);
  font-weight: 400;
}
.help-authoring__category svg {
  width: 13px;
  height: 13px;
}
.help-authoring__toolbar {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-4, 18px);
  padding: var(--feature-ui-space-2, 7px) var(--feature-ui-space-2, 10px);
  border-block: 1px solid var(--color-border-subtle);
  margin-bottom: 13px;
  color: var(--color-text-secondary);
  font-size: 12px;
}
.help-authoring__toolbar svg {
  width: 14px;
  height: 14px;
}
.help-authoring__editor > p {
  font-size: 13px;
  line-height: 1.8;
  color: var(--color-text-secondary);
}
.help-authoring__editor > .help-authoring__excerpt {
  margin-bottom: 8px;
  color: var(--color-text-primary);
}
.help-authoring__review {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 5px);
  margin-top: 17px;
  color: var(--color-text-muted);
  font-size: 11px;
}
.help-authoring__review svg {
  width: 13px;
  height: 13px;
}
.help-authoring__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--feature-ui-space-2, 8px);
  margin-top: 14px;
  font-size: 12px;
}
.help-authoring__actions > span {
  padding: var(--feature-ui-space-2, 7px) var(--feature-ui-space-2, 9px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-control, 8px);
}
.help-authoring__actions > strong {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 5px);
  padding: var(--feature-ui-space-2, 8px) var(--feature-ui-space-2, 9px);
  border-radius: var(--feature-ui-radius-control, 8px);
  background: var(--color-accent-lime-soft);
  font-weight: 500;
}
.help-authoring__actions svg {
  width: 14px;
  height: 14px;
}
.help-public__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--feature-ui-chrome-padding, 16px 20px);
  border-bottom: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
}
.help-public__header > strong {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 8px);
}
.help-public__header > small {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 5px);
}
.help-public__header > small svg {
  width: 13px;
  height: 13px;
}
.help-public__hero {
  padding: var(--feature-ui-space-5, 22px) 28px;
  background:
    radial-gradient(
      ellipse at top left,
      var(--color-accent-lime-soft),
      transparent 75%
    ),
    var(--color-accent-mint-soft);
  text-align: center;
}
.help-public__hero > strong {
  display: block;
  margin-bottom: 14px;
  font-size: 22px;
}
.help-public__search {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 10px);
  padding: var(--feature-ui-space-3, 11px) var(--feature-ui-space-3, 14px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-control, 10px);
  text-align: left;
  background: var(--color-surface-white);
  box-shadow: var(--feature-ui-card-shadow, 0 4px 10px rgba(14, 35, 23, 0.04));
}
.help-public__enter {
  margin-left: auto;
  color: var(--color-text-muted);
}
.help-public__body {
  padding: var(--feature-ui-space-4, 16px) var(--feature-ui-space-5, 22px);
}
.help-public__categories {
  display: flex;
  gap: var(--feature-ui-space-2, 7px);
  font-size: 12px;
  margin-bottom: 16px;
}
.help-public__categories > span {
  padding: var(--feature-ui-space-1, 5px) var(--feature-ui-space-3, 11px);
  border-radius: var(--feature-ui-radius-card, 7px);
  color: var(--color-text-secondary);
  background: var(--color-page-background);
}
.help-public__categories > .is-active {
  color: var(--color-text-primary);
  background: var(--color-accent-lime-soft);
}
.help-public__summary {
  padding: var(--feature-ui-space-3, 14px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 12px);
  background: linear-gradient(
    135deg,
    var(--color-page-background),
    var(--color-surface-white)
  );
}
.help-public__summary > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.help-public__summary strong {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 7px);
  font-size: 13px;
}
.help-public__summary > p {
  margin-top: 9px;
  font-size: 13px;
  line-height: 1.75;
  color: var(--color-text-secondary);
}
.help-public__summary > span {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 5px);
  padding-top: 10px;
  margin-top: 10px;
  border-top: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
  font-size: 11px;
  color: var(--color-text-muted);
}
.help-public__summary > span svg {
  width: 13px;
  height: 13px;
}
.help-public__article {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-3, 12px);
  padding: var(--feature-ui-space-4, 17px) 0;
}
.help-public__article-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 42px;
  border-radius: var(--feature-ui-radius-icon, 8px);
  background: var(--color-accent-sky-soft);
}
.help-public__article > div {
  flex: 1;
}
.help-public__article strong {
  display: block;
  font-size: 15px;
  margin-block: 2px;
}
.help-public__article p {
  font-size: 12px;
  color: var(--color-text-secondary);
}
.help-public__related {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-3, 14px);
  padding: var(--feature-ui-space-3, 12px) 0;
  border-top: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
}
.help-public__related > span {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 8px);
  font-size: 12px;
}
.help-public__related svg {
  width: 13px;
  height: 13px;
}
.help-public__feedback {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 7px);
  padding-top: 10px;
  font-size: 11px;
  color: var(--color-text-muted);
}
.help-public__feedback > span:first-child {
  margin-right: auto;
}
.help-public__feedback > span:not(:first-child) {
  padding: var(--feature-ui-space-1, 4px) var(--feature-ui-space-2, 8px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-default));
  border-radius: var(--feature-ui-radius-card, 6px);
}
.help-public__chat {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 9px);
  padding: var(--feature-ui-space-3, 13px) var(--feature-ui-space-5, 20px);
  border-top: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
  background: var(--color-page-background);
  font-size: 12px;
}
.help-public__chat > svg:last-child {
  margin-left: auto;
}
.help-brand__body {
  padding: var(--feature-ui-space-5, 20px);
}
.help-brand__identity {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 10px);
}
.help-brand__logo {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--feature-ui-radius-icon, 12px);
  background: linear-gradient(
    135deg,
    var(--color-accent-lime),
    var(--color-accent-mint)
  );
}
.help-brand__logo svg {
  width: 24px;
  height: 24px;
}
.help-brand__identity > div {
  flex: 1;
}
.help-brand__identity > div > small {
  display: block;
  margin-top: 3px;
}
.help-brand__swatches {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 5px);
}
.help-brand__swatches > small {
  margin-right: 5px;
}
.help-brand__swatches i {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-accent-lime);
}
.help-brand__swatches i:nth-of-type(2) {
  background: var(--color-accent-mint);
}
.help-brand__swatches i:nth-of-type(3) {
  background: var(--color-surface-inverse);
}
.help-brand__domain {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-3, 12px);
  margin-block: 20px;
  padding: var(--feature-ui-space-3, 12px) var(--feature-ui-space-3, 14px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 10px);
  background: var(--color-page-background);
}
.help-brand__domain > div {
  flex: 1;
}
.help-brand__domain small {
  display: block;
  margin-bottom: 2px;
}
.help-brand__domain > span {
  padding: 3px var(--feature-ui-space-2, 7px);
  border-radius: var(--feature-ui-radius-card, 6px);
  background: var(--color-accent-butter-soft);
  font-size: 11px;
}
.help-brand__settings-title {
  display: block;
  margin-bottom: 11px;
  font-size: 13px;
}
.help-brand__fields {
  display: grid;
  gap: var(--feature-ui-space-2, 10px);
  margin: 0;
}
.help-brand__fields > div {
  display: grid;
  grid-template-columns: 75px minmax(0, 1fr);
  align-items: center;
  gap: var(--feature-ui-space-2, 10px);
}
.help-brand__fields dt {
  color: var(--color-text-muted);
  font-size: 12px;
}
.help-brand__fields dd {
  margin: 0;
  padding: var(--feature-ui-space-2, 8px) var(--feature-ui-space-2, 10px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-default));
  border-radius: var(--feature-ui-radius-control, 8px);
  font-size: 12px;
}
.help-brand__preview {
  margin-top: 20px;
  padding: var(--feature-ui-space-4, 15px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 12px);
  background: linear-gradient(
    135deg,
    var(--color-surface-white),
    var(--color-page-background)
  );
}
.help-brand__preview > small {
  display: block;
  margin-bottom: 11px;
}
.help-brand__preview > span {
  display: block;
  margin-bottom: 3px;
  color: var(--color-text-muted);
  font-size: 11px;
}
.help-brand__preview > strong {
  display: block;
  font-size: 16px;
}
.help-brand__preview > p {
  margin-top: 5px;
  font-size: 12px;
  color: var(--color-text-secondary);
}
@media (min-width: 810px) and (max-width: 1199.98px) {
  .help-detail__layout {
    gap: 32px;
  }
  .help-detail__visual {
    padding: 18px;
  }
}
@media (max-width: 809.98px) {
  .help-detail__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-content-gap);
  }
  .help-detail--reverse .help-detail__copy {
    order: 0;
  }
  .help-detail__copy .product-eyebrow {
    margin-bottom: 12px;
  }
  .help-detail__copy > p {
    margin-top: var(--space-heading-gap);
    font-size: var(--font-body-large);
    line-height: 1.7;
  }
  .help-detail__copy ul {
    margin-top: 20px;
    gap: 12px;
    font-size: var(--font-body);
  }
  .help-detail__visual {
    padding: 14px;
    border-radius: var(--radius-card);
  }
  .help-detail__visual figcaption {
    margin-top: 10px;
    font-size: 11px;
  }
}
.ticket-detail__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 64px;
}
.ticket-detail--reverse .ticket-detail__copy {
  order: 2;
}
.ticket-detail__copy h2 {
  font-size: var(--font-heading-two);
}
.ticket-detail__copy h2 > span {
  display: inline-block;
}
.ticket-detail__copy > p {
  margin-top: 24px;
  font-size: var(--font-body-large);
  line-height: 1.8;
  color: var(--color-text-secondary);
}
.ticket-detail__copy ul {
  display: grid;
  gap: 18px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--font-body);
  line-height: 1.7;
  color: var(--color-text-secondary);
}
.ticket-detail__copy li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.ticket-detail__copy li > svg {
  flex: 0 0 18px;
  margin-top: 5px;
}
.ticket-detail__visual {
  min-width: 0;
  margin: 0;
  padding: 24px;
  border-radius: var(--radius-panel);
  background:
    radial-gradient(
      ellipse at top left,
      rgba(255, 255, 255, 0.74),
      transparent 72%
    ),
    var(--color-accent-butter-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  container-type: inline-size;
}
.ticket-detail__visual figcaption {
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-muted);
}
.ticket-detail__canvas {
  width: 560px;
  zoom: tan(atan2(100cqw, 560px));
}
.ticket-scene {
  overflow: hidden;
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-panel, var(--radius-card));
  background: var(--color-surface-white);
  color: var(--color-text-primary);
  box-shadow: var(--feature-ui-panel-shadow, var(--shadow-card));
  font-size: 14px;
  line-height: 1.6;
}
.ticket-scene strong,
.ticket-scene b {
  font-weight: 600;
}
.ticket-scene small {
  font-size: 12px;
  color: var(--color-text-muted);
}
.ticket-scene p,
.ticket-scene dl,
.ticket-scene dd {
  margin: 0;
}
.ticket-scene svg {
  flex-shrink: 0;
}
.ticket-scene__chrome {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 10px);
  padding: var(--feature-ui-chrome-padding, 16px 20px);
  border-bottom: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
}
.ticket-scene__chrome > small {
  margin-left: auto;
}
.ticket-scene__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--feature-ui-radius-icon, 9px);
  background: linear-gradient(
    135deg,
    var(--color-accent-butter-soft),
    var(--color-accent-mint-soft)
  );
}
.ticket-scene__mark svg {
  width: 18px;
  height: 18px;
}
.ticket-scene__avatar {
  display: grid;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: 50%;
  background: var(--color-accent-butter-soft);
}
.ticket-scene__foot {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 8px);
  padding: var(--feature-ui-foot-padding, 13px 20px);
  border-top: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
  color: var(--color-text-muted);
  font-size: 12px;
}
.ticket-scene__foot svg {
  width: 14px;
  height: 14px;
}
.ticket-intake-body {
  padding: var(--feature-ui-space-6, 24px);
  background: linear-gradient(
    180deg,
    var(--color-surface-subtle),
    var(--color-surface-white) 65%
  );
}
.ticket-intake-message {
  display: flex;
  align-items: flex-start;
  gap: var(--feature-ui-space-3, 12px);
}
.ticket-intake-message > div {
  flex: 1;
}
.ticket-intake-message small {
  display: block;
  margin-bottom: 7px;
}
.ticket-intake-message p {
  padding: var(--feature-ui-space-3, 12px) var(--feature-ui-space-4, 15px);
  border-radius: 0 14px 14px;
  background: var(--color-text-primary);
  color: var(--color-surface-white);
}
.ticket-intake-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--feature-ui-space-2, 8px);
  padding: var(--feature-ui-space-4, 16px) 0;
  color: var(--color-text-muted);
}
.ticket-intake-record {
  overflow: hidden;
  padding: var(--feature-ui-space-4, 18px) var(--feature-ui-space-5, 20px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 16px);
  background: var(--color-surface-white);
  box-shadow: var(--feature-ui-card-shadow, 0 5px 16px rgba(20, 35, 27, 0.04));
}
.ticket-intake-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ticket-intake-heading > span {
  color: var(--color-text-muted);
  font-size: 12px;
}
.ticket-intake-heading small {
  padding: 2px var(--feature-ui-space-2, 9px);
  border-radius: var(--feature-ui-radius-card, 6px);
  background: var(--color-accent-butter-soft);
  color: var(--color-text-primary);
}
.ticket-intake-title {
  display: block;
  margin: 8px 0 16px;
  font-size: 18px;
  line-height: 1.4;
}
.ticket-intake-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--feature-ui-space-3, 12px) var(--feature-ui-space-6, 24px);
  border-top: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
  padding-top: 14px;
}
.ticket-intake-facts > div {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-3, 12px);
}
.ticket-intake-facts dt {
  flex-shrink: 0;
  color: var(--color-text-muted);
  font-size: 12px;
}
.ticket-intake-facts dd {
  font-size: 13px;
}
.ticket-intake-similar {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-3, 12px);
  margin-top: 16px;
  padding: var(--feature-ui-space-3, 13px) var(--feature-ui-space-4, 16px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 12px);
  background: var(--color-surface-subtle);
}
.ticket-intake-similar > div {
  display: grid;
  gap: 2px;
}
.ticket-intake-similar strong {
  font-size: 13px;
}
.ticket-intake-similar > svg:last-child {
  margin-left: auto;
}
.ticket-evidence-body {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
}
.ticket-evidence-sources {
  display: flex;
  flex-direction: column;
  gap: var(--feature-ui-space-3, 14px);
  padding: var(--feature-ui-space-5, 20px) var(--feature-ui-space-4, 16px);
  border-right: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
  background: var(--color-surface-subtle);
}
.ticket-evidence-source {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--feature-ui-space-4, 15px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 12px);
  background: var(--color-surface-white);
}
.ticket-evidence-source > svg {
  margin-bottom: 10px;
  color: var(--color-text-secondary);
}
.ticket-evidence-number {
  position: absolute;
  right: 12px;
  top: 12px;
  font-size: 10px;
  color: var(--color-text-muted);
}
.ticket-evidence-source > strong {
  margin-top: 1px;
  font-size: 13px;
}
.ticket-evidence-source > b {
  margin-top: 10px;
  font-size: 22px;
  letter-spacing: -0.5px;
}
.ticket-evidence-connection {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 5px);
  margin-top: auto;
  color: var(--color-text-muted);
  font-size: 11px;
}
.ticket-evidence-connection svg {
  width: 13px;
  height: 13px;
}
.ticket-evidence-findings {
  padding: var(--feature-ui-space-5, 20px);
}
.ticket-evidence-confirmed {
  padding: var(--feature-ui-space-4, 16px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 14px);
  background: linear-gradient(
    135deg,
    var(--color-surface-white),
    var(--color-accent-butter-soft)
  );
}
.ticket-evidence-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--feature-ui-space-2, 8px);
}
.ticket-evidence-label > span {
  display: inline-flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 4px);
  font-size: 11px;
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.ticket-evidence-label svg {
  width: 13px;
  height: 13px;
}
.ticket-evidence-confirmed > b {
  display: block;
  margin-top: 12px;
  font-size: 38px;
  letter-spacing: -1.5px;
  line-height: 1.2;
}
.ticket-evidence-confirmed > p {
  margin-top: 6px;
  font-size: 12px;
  color: var(--color-text-secondary);
}
.ticket-evidence-confirmed > small {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 5px);
  margin-top: 15px;
  padding-top: 12px;
  border-top: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
  font-size: 10px;
  white-space: nowrap;
}
.ticket-evidence-confirmed > small svg {
  width: 12px;
  height: 12px;
}
.ticket-evidence-pending {
  margin-top: 16px;
  padding: var(--feature-ui-space-3, 14px) 0 var(--feature-ui-space-4, 16px);
  border-bottom: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
}
.ticket-evidence-pending p {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-text-secondary);
}
.ticket-evidence-report {
  margin-top: 16px;
}
.ticket-evidence-report > strong {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 6px);
  font-size: 13px;
}
.ticket-evidence-report > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--feature-ui-space-1, 6px);
  margin-top: 10px;
}
.ticket-evidence-report > div span {
  padding: 3px var(--feature-ui-space-2, 8px);
  border-radius: 5px;
  background: var(--color-surface-subtle);
  color: var(--color-text-muted);
  font-size: 11px;
}
.ticket-autonomy-body {
  padding: var(--feature-ui-space-5, 22px);
}
.ticket-autonomy-levels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--feature-ui-space-2, 10px);
}
.ticket-autonomy-levels > div {
  padding: var(--feature-ui-space-3, 13px) var(--feature-ui-space-3, 12px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 12px);
}
.ticket-autonomy-levels > .is-selected {
  background: linear-gradient(
    135deg,
    var(--color-accent-butter-soft),
    var(--color-accent-mint-soft)
  );
  border-color: var(--color-text-secondary);
}
.ticket-autonomy-levels > div > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.ticket-autonomy-levels > div > div > span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.8px;
}
.ticket-autonomy-levels > div > div > svg {
  width: 14px;
  height: 14px;
}
.ticket-autonomy-levels strong,
.ticket-autonomy-levels small {
  display: block;
}
.ticket-autonomy-levels small {
  margin-top: 3px;
  font-size: 11px;
}
.ticket-autonomy-proposal {
  margin-top: 20px;
  overflow: hidden;
  padding: var(--feature-ui-space-4, 18px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 14px);
  background: linear-gradient(
    180deg,
    var(--color-surface-subtle),
    var(--color-surface-white) 80%
  );
}
.ticket-autonomy-proposal-heading {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 8px);
}
.ticket-autonomy-proposal-heading > strong {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 6px);
}
.ticket-autonomy-proposal-heading > small {
  margin-left: auto;
  padding: 2px var(--feature-ui-space-2, 8px);
  border-radius: var(--feature-ui-radius-card, 5px);
  background: var(--color-accent-butter-soft);
  color: var(--color-text-primary);
  font-size: 11px;
}
.ticket-autonomy-proposal > p {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.8;
}
.ticket-autonomy-source {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 5px);
  margin-top: 10px;
}
.ticket-autonomy-source > svg {
  width: 14px;
  height: 14px;
}
.ticket-autonomy-reviewers {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-4, 18px);
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
}
.ticket-autonomy-reviewers > span {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 7px);
  font-size: 11px;
  color: var(--color-text-secondary);
}
.ticket-autonomy-reviewers i {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: 50%;
  background: var(--color-accent-mint-soft);
  font-style: normal;
  color: var(--color-text-primary);
}
.ticket-autonomy-reviewers > span:last-child i {
  background: var(--color-accent-butter-soft);
}
.ticket-autonomy-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--feature-ui-space-2, 8px);
  margin-top: 17px;
}
.ticket-autonomy-actions > span {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 6px);
  padding: var(--feature-ui-space-2, 7px) var(--feature-ui-space-3, 12px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-control, 8px);
  font-size: 12px;
  background: var(--color-surface-white);
}
.ticket-autonomy-actions > .is-pending {
  background: var(--color-surface-subtle);
  border-color: var(--color-border-subtle);
  color: var(--color-text-muted);
}
.ticket-autonomy-actions svg {
  width: 14px;
  height: 14px;
}
.ticket-autonomy-audit {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 7px);
  margin-top: 17px;
  padding: 0 3px;
}
.ticket-autonomy-audit > strong {
  font-size: 12px;
}
.ticket-autonomy-audit > small {
  margin-left: auto;
  font-size: 11px;
}
.ticket-progress-body {
  padding: var(--feature-ui-space-5, 22px);
}
.ticket-progress-stages {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}
.ticket-progress-stages:before {
  content: "";
  position: absolute;
  top: 12px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: linear-gradient(
    to right,
    var(--color-accent-mint) 33.33%,
    var(--color-border-subtle) 33.33%
  );
}
.ticket-progress-stages > li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--feature-ui-space-2, 7px);
}
.ticket-progress-stages > li > span {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: 50%;
  background: var(--color-surface-white);
  color: var(--color-text-muted);
  font-size: 11px;
}
.ticket-progress-stages > li.is-reached > span {
  background: var(--color-text-primary);
  color: var(--color-surface-white);
  border-color: var(--color-text-primary);
}
.ticket-progress-stages > li.is-reached:nth-child(2) > span {
  background: linear-gradient(
    135deg,
    var(--color-accent-lime-soft),
    var(--color-accent-mint-soft)
  );
  color: var(--color-text-primary);
  border-color: var(--color-accent-mint);
}
.ticket-progress-stages svg {
  width: 13px;
  height: 13px;
}
.ticket-progress-stages strong {
  font-size: 11px;
}
.ticket-progress-settings {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: var(--feature-ui-space-3, 14px);
}
.ticket-progress-targets,
.ticket-progress-template {
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 12px);
  padding: var(--feature-ui-space-4, 15px);
}
.ticket-progress-targets {
  background: var(--color-surface-subtle);
}
.ticket-progress-targets > strong,
.ticket-progress-template > strong {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 6px);
  font-size: 13px;
}
.ticket-progress-targets dl {
  display: grid;
  gap: var(--feature-ui-space-3, 13px);
  margin-top: 16px;
}
.ticket-progress-targets dl > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--feature-ui-space-2, 10px);
}
.ticket-progress-targets dt {
  color: var(--color-text-muted);
  font-size: 11px;
}
.ticket-progress-targets dd {
  font-size: 14px;
  font-weight: 600;
}
.ticket-progress-targets > small {
  display: block;
  margin-top: 18px;
  font-size: 10px;
}
.ticket-progress-template > b {
  display: block;
  font-size: 12px;
  margin-top: 13px;
}
.ticket-progress-template p {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--color-text-secondary);
}
.ticket-progress-template > small {
  display: block;
  margin-top: 13px;
  padding-top: 10px;
  border-top: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
  font-size: 10px;
}
.ticket-progress-followup {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-3, 11px);
  margin-top: 14px;
  padding: var(--feature-ui-space-3, 12px) var(--feature-ui-space-4, 15px);
  border-radius: var(--feature-ui-radius-card, 12px);
  background: var(--color-accent-butter-soft);
}
.ticket-progress-followup > div {
  display: grid;
  gap: 3px;
}
.ticket-progress-followup strong {
  font-size: 12px;
}
.ticket-progress-followup small {
  font-size: 11px;
  color: var(--color-text-secondary);
}
.ticket-progress-jira {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 10px);
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
}
.ticket-progress-jira > div:not(.ticket-progress-direction) {
  display: grid;
  gap: 3px;
}
.ticket-progress-jira strong {
  font-size: 13px;
}
.ticket-progress-jira small {
  font-size: 11px;
}
.ticket-progress-direction {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.ticket-progress-direction > svg {
  width: 56px;
  height: 18px;
}

@media (min-width: 810px) and (max-width: 1199.98px) {
  .ticket-detail__layout {
    gap: 32px;
  }
  .ticket-detail__visual {
    padding: 18px;
  }
}
@media (max-width: 809.98px) {
  .ticket-detail__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-content-gap);
  }
  .ticket-detail--reverse .ticket-detail__copy {
    order: 0;
  }
  .ticket-detail__copy .product-eyebrow {
    margin-bottom: 12px;
  }
  .ticket-detail__copy > p {
    margin-top: var(--space-heading-gap);
    font-size: var(--font-body-large);
    line-height: 1.7;
  }
  .ticket-detail__copy ul {
    margin-top: 20px;
    gap: 12px;
    font-size: var(--font-body);
  }
  .ticket-detail__visual {
    padding: 14px;
    border-radius: var(--radius-card);
  }
  .ticket-detail__visual figcaption {
    margin-top: 10px;
    font-size: 11px;
  }
}
.pricing-question.pricing-question__element-1,
.pricing-question .pricing-question__element-1 {
  display: block;
}
.pricing-question.pricing-question__closed-layout {
  align-content: flex-start;
  align-items: flex-start;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0px;
  height: min-content;
  justify-content: flex-start;
  overflow: var(--overflow-clip-fallback, clip);
  padding: 0px;
  position: relative;
  width: 440px;
  will-change: var(--site-will-change-override, transform);
}
.pricing-question .pricing-question__question-row {
  align-content: center;
  align-items: center;
  cursor: pointer;
  display: flex;
  flex: none;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 16px;
  height: min-content;
  justify-content: flex-start;
  padding: 20px 20px 20px 24px;
  position: relative;
  width: 100%;
}
.pricing-question .pricing-question__question-row:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset-inset);
  border-radius: var(--radius-card-compact);
}
.pricing-question .pricing-question__question {
  --site-text-wrap-override: wrap;
  -webkit-user-select: none;
  flex: 1 0 0px;
  height: auto;
  position: relative;
  user-select: none;
  width: 1px;
  --font-weight-body: var(--faq-question-weight);
  --font-body: var(--faq-question-size);
}
.pricing-question .pricing-question__toggle {
  align-content: center;
  align-items: center;
  display: flex;
  flex: none;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0px;
  height: 36px;
  justify-content: center;
  padding: 0px;
  position: relative;
  width: 36px;
}
.pricing-question .pricing-question__plus,
.pricing-question .pricing-question__minus {
  flex: none;
  height: auto;
  position: relative;
  width: var(--faq-icon-size);
}
.pricing-question .pricing-question__answer {
  align-content: flex-start;
  align-items: flex-start;
  display: flex;
  flex: none;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0px;
  height: min-content;
  justify-content: flex-start;
  padding: 0px 24px 24px 24px;
  position: relative;
  width: 100%;
  --font-body: var(--faq-answer-size);
}
.pricing-question .pricing-question__answer-2 {
  --site-text-wrap-override: wrap;
  -webkit-user-select: none;
  flex: none;
  height: auto;
  position: relative;
  user-select: none;
  width: 100%;
}
.pricing-question.pricing-question--open.pricing-question__closed-layout {
  cursor: unset;
}
.type-body .type-body__text:not(.rich-text-wrapper),
.type-body .type-body__text.rich-text-wrapper p {
  --site-font-family: var(--font-ui);
  --site-font-family-bold: var(--font-ui);
  --site-font-family-bold-italic: var(--font-ui);
  --site-font-family-italic: var(--font-ui);
  --site-font-open-type-features:
    "blwf" on, "cv03" on, "cv04" on, "cv09" on, "cv11" on;
  --site-font-size: var(--font-body);
  --site-font-style: normal;
  --site-font-style-bold: normal;
  --site-font-style-bold-italic: italic;
  --site-font-style-italic: italic;
  --site-font-variation-axes: normal;
  --site-font-weight: var(--font-weight-body);
  --site-font-weight-bold: var(--font-weight-strong);
  --site-font-weight-bold-italic: var(--font-weight-strong);
  --site-font-weight-italic: 400;
  --site-letter-spacing: 0em;
  --site-line-height: var(--line-height-body);
  --site-paragraph-spacing: 0px;
  --site-text-alignment: start;
  --site-text-color: var(--color-text-secondary);
  --site-text-decoration: none;
  --site-text-stroke-color: initial;
  --site-text-stroke-width: initial;
  --site-text-transform: none;
}
.hero-action-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 260px;
  max-width: 100%;
  min-height: 60px;
  box-sizing: border-box;
  padding: 8px 10px;
  border-radius: 999px;
  background: var(--color-surface-inverse);
  color: var(--color-surface-white);
  font-family: var(--font-ui);
}
.hero-action-hint__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--color-text-primary);
  background: linear-gradient(
    140deg,
    var(--color-accent-lime),
    var(--color-accent-mint)
  );
}
.hero-action-hint__copy {
  min-width: 0;
  animation: hero-chat-enter 240ms ease-out;
}
.hero-action-hint__copy strong {
  display: block;
  font-size: var(--font-label);
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}
.hero-action-hint__copy > span {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
  color: color-mix(in srgb, var(--color-surface-white) 72%, transparent);
  font-size: var(--font-caption);
  line-height: 1.5;
  white-space: nowrap;
}
.hero-action-hint__copy i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  margin: 0 3px;
}
.hero-action-hint__copy i.is-working {
  background: var(--color-accent-lime);
  animation: hero-chat-pulse 1s ease-in-out infinite;
}
.hero-conversation {
  width: 100%;
  height: 318px;
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-panel, 24px);
  background: var(--color-surface-white);
  box-shadow: var(--feature-ui-panel-shadow, var(--shadow-card));
  color: var(--color-text-primary);
  font-family: var(--font-ui);
  text-align: left;
}
.hero-conversation p {
  margin: 0;
  font-size: var(--font-demo-body);
  line-height: 1.55;
}
.hero-conversation__control {
  position: absolute;
  right: 4px;
  bottom: 4px;
  z-index: 1;
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-surface-white);
  color: var(--color-text-muted);
  cursor: pointer;
  opacity: 0;
  transition:
    opacity 180ms ease,
    background 180ms ease,
    color 180ms ease;
}
.hero-conversation:hover .hero-conversation__control,
.hero-conversation:focus-within .hero-conversation__control,
.hero-conversation[data-finished="true"] .hero-conversation__control {
  opacity: 1;
}
.hero-conversation__control:hover {
  background: var(--color-surface-subtle);
  color: var(--color-text-primary);
}
.hero-conversation__control:focus-visible {
  outline: 2px solid var(--color-text-primary);
  outline-offset: -3px;
}
.hero-conversation__messages {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--feature-ui-space-2, 10px);
  padding: var(--feature-ui-space-5, 22px) var(--feature-ui-space-5, 22px) 48px;
  overflow-y: auto;
  overscroll-behavior: contain;
  overflow-anchor: none;
  scrollbar-width: none;
}
.hero-conversation__messages::-webkit-scrollbar {
  display: none;
}
.hero-conversation__messages:focus-visible {
  outline: 2px solid var(--color-border-subtle);
  outline-offset: -3px;
}
.hero-conversation__message {
  flex: none;
  max-width: 94%;
  min-width: 36px;
  animation: hero-chat-enter 240ms ease-out;
}
.hero-conversation__speaker {
  display: block;
  margin: 0 3px 4px;
  color: var(--color-text-muted);
  font-size: var(--font-demo-body);
  line-height: 1.4;
}
.hero-conversation__message--assistant .hero-conversation__speaker {
  color: var(--color-brand-green);
}
.hero-conversation__bubble {
  padding: var(--feature-ui-space-2, 9px) var(--feature-ui-space-3, 11px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 14px)
    var(--feature-ui-radius-card, 14px) var(--feature-ui-radius-card, 14px)
    var(--feature-ui-radius-tail, 3px);
  background: var(--color-surface-subtle);
  overflow-wrap: anywhere;
}
.hero-conversation__bubble p {
  min-height: 1.55em;
}
.hero-conversation__message--assistant,
.hero-conversation__message--human {
  align-self: flex-end;
}
.hero-conversation__message--assistant .hero-conversation__speaker,
.hero-conversation__message--human .hero-conversation__speaker {
  display: block;
  text-align: right;
}
.hero-conversation__message--assistant .hero-conversation__speaker {
  width: fit-content;
  margin-left: auto;
}
.hero-conversation__message--assistant .hero-conversation__bubble,
.hero-conversation__message--human .hero-conversation__bubble {
  color: var(--color-text-primary);
  border-color: color-mix(in srgb, var(--color-brand-green) 18%, transparent);
  border-radius: var(--feature-ui-radius-card, 14px)
    var(--feature-ui-radius-card, 14px) var(--feature-ui-radius-tail, 3px)
    var(--feature-ui-radius-card, 14px);
}
.hero-conversation__message--assistant .hero-conversation__bubble {
  background: linear-gradient(
    140deg,
    var(--color-accent-lime-soft),
    color-mix(
      in srgb,
      var(--color-accent-mint-soft) 55%,
      var(--color-surface-white)
    )
  );
}
.hero-conversation__message--human .hero-conversation__bubble {
  background: linear-gradient(
    140deg,
    color-mix(
      in srgb,
      var(--color-accent-mint-soft) 72%,
      var(--color-surface-white)
    ),
    color-mix(
      in srgb,
      var(--color-accent-mint-soft) 40%,
      var(--color-surface-white)
    )
  );
}
.hero-conversation__message--system {
  align-self: center;
  max-width: 100%;
  width: 100%;
}
.hero-conversation__message--system .hero-conversation__speaker {
  display: none;
}
.hero-conversation__message--system .hero-conversation__bubble {
  padding: var(--feature-ui-space-1, 4px) var(--feature-ui-space-1, 6px);
  text-align: center;
  color: var(--color-text-muted);
  background: transparent;
  border: 0;
}
.hero-conversation__rating {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 9px);
  padding-top: 9px;
  margin-top: 9px;
  border-top: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
}
.hero-conversation__rating > span {
  display: flex;
  gap: 3px;
  color: var(--color-text-primary);
}
.hero-conversation__rating svg {
  fill: currentColor;
}
.hero-conversation__rating strong {
  font-size: var(--font-demo-body);
  font-weight: 500;
}
.hero-conversation__source {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 5px);
  margin-top: 8px;
  color: var(--color-text-muted);
  font-size: var(--font-demo-body);
  line-height: 1.4;
}
.hero-conversation__source svg {
  flex: none;
}
.hero-conversation__message--assistant .hero-conversation__source,
.hero-conversation__message--human .hero-conversation__source {
  color: var(--color-text-secondary);
}
.hero-conversation__file,
.hero-conversation__ticket {
  margin-top: 10px;
  padding: var(--feature-ui-space-2, 10px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 10px);
  background: color-mix(in srgb, var(--color-surface-white) 86%, transparent);
  font-size: var(--font-demo-body);
  line-height: 1.5;
}
.hero-conversation__file {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 8px);
}
.hero-conversation__file-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 38px;
  border-radius: var(--feature-ui-radius-icon, 7px);
  background: var(--color-accent-mint-soft);
  color: var(--color-brand-green);
}
.hero-conversation__file > div {
  min-width: 0;
}
.hero-conversation__file strong,
.hero-conversation__ticket > strong {
  display: block;
  font-weight: 500;
}
.hero-conversation__file div > span,
.hero-conversation__ticket-detail {
  display: block;
  margin-top: 3px;
  color: var(--color-text-muted);
}
.hero-conversation__ticket-meta,
.hero-conversation__ticket-meta > span:first-child,
.hero-conversation__ticket-owner {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 5px);
}
.hero-conversation__ticket-meta {
  justify-content: space-between;
  margin-bottom: 6px;
  color: var(--color-text-muted);
}
.hero-conversation__ticket-status {
  padding: 1px var(--feature-ui-space-1, 6px);
  border-radius: var(--feature-ui-radius-badge, 5px);
  color: var(--color-text-secondary);
  background: var(--color-accent-peach-soft);
  white-space: nowrap;
}
.hero-conversation__ticket-owner {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
  color: var(--color-text-secondary);
}
.hero-conversation__waiting {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--feature-ui-space-1, 5px);
  width: 58px;
  min-height: 34px;
  box-sizing: border-box;
  margin-left: auto;
}
.hero-conversation__waiting i {
  width: 5px;
  height: 5px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
  animation: hero-chat-wait 900ms ease-in-out infinite;
}
.hero-conversation__waiting i:nth-child(2) {
  animation-delay: 120ms;
}
.hero-conversation__waiting i:nth-child(3) {
  animation-delay: 240ms;
}
@keyframes hero-chat-wait {
  0%,
  60%,
  100% {
    opacity: 0.35;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-3px);
  }
}
@keyframes hero-chat-enter {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes hero-chat-pulse {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-action-hint *,
  .hero-conversation * {
    animation: none !important;
    transition: none !important;
  }
}
.feature-conversation {
  height: 318px;
}
.feature-conversation__articles {
  display: grid;
  gap: var(--feature-ui-space-2, 7px);
  margin-top: 10px;
}
.feature-conversation__article {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 9px);
  padding: var(--feature-ui-space-2, 10px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 10px);
  background: var(--color-surface-white);
}
.feature-conversation__article > svg {
  flex: none;
  color: var(--color-brand-green);
}
.feature-conversation__article strong,
.feature-conversation__article span {
  display: block;
  font-size: var(--font-demo-body);
  line-height: 1.5;
}
.feature-conversation__article strong {
  font-weight: 500;
}
.feature-conversation__article span {
  margin-top: 2px;
  color: var(--color-text-muted);
}
.feature-conversation__operation {
  flex: none;
  align-self: center;
  max-width: 100%;
  padding: var(--feature-ui-space-1, 6px) 0;
  text-align: center;
  overflow-wrap: anywhere;
}
.feature-conversation__operation > span,
.feature-conversation__record-label {
  display: block;
  margin-bottom: 4px;
  color: var(--color-text-muted);
  font-size: var(--font-caption);
  line-height: 1.5;
}
.feature-conversation__operation > p {
  color: var(--color-text-secondary);
}
.feature-conversation__record {
  align-self: stretch;
  flex: none;
  min-width: 0;
  padding: var(--feature-ui-space-3, 12px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 12px);
  background: var(--color-surface-subtle);
  overflow-wrap: anywhere;
}
.feature-conversation__record > strong {
  display: block;
  font-size: var(--font-demo-body);
  font-weight: 500;
  line-height: 1.5;
}
.feature-conversation__record dl {
  display: grid;
  gap: var(--feature-ui-space-1, 5px);
  margin: 9px 0 0;
  font-size: var(--font-demo-body);
  line-height: 1.5;
}
.feature-conversation__record dl > div {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--feature-ui-space-2, 8px);
}
.feature-conversation__record dt {
  color: var(--color-text-muted);
}
.feature-conversation__record dd {
  margin: 0;
}
.feature-conversation__record-result {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 5px);
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
  color: var(--color-brand-green);
  font-size: var(--font-demo-body);
  line-height: 1.5;
}
.feature-conversation__record-result > svg {
  flex: none;
}

@media (max-width: 809.98px) {
  .feature-conversation .hero-conversation__messages {
    padding: 18px 16px 48px;
  }
  .feature-conversation .hero-conversation__message {
    max-width: 100%;
  }
  .feature-conversation__record dl > div {
    grid-template-columns: 60px minmax(0, 1fr);
  }
}
/* Gradients accent the brand and AI output; ordinary UI surfaces stay solid. */
:where(
  .handover-flow,
  .feature-workspace--inbox,
  .feature-workspace--help-center,
  .voice-preview,
  .voice-tabs
) {
  --preview-brand: linear-gradient(
    135deg,
    var(--color-accent-lime),
    var(--color-accent-mint)
  );
  --preview-soft: linear-gradient(
    120deg,
    color-mix(
      in srgb,
      var(--color-accent-lime-soft) 40%,
      var(--color-surface-white)
    ),
    color-mix(
      in srgb,
      var(--color-accent-mint-soft) 40%,
      var(--color-surface-white)
    )
  );
  --preview-edge: var(
    --feature-ui-border-color,
    color-mix(in srgb, var(--color-brand-green) 15%, transparent)
  );
  --preview-shadow: var(--feature-ui-panel-shadow, var(--shadow-card));
  --preview-shadow-small: var(--feature-ui-card-shadow, var(--shadow-input));
}
.agent-detail-page
  .agent-detail-page__hero-card.agent-detail-page__hero-card--workspace {
  gap: var(--space-6);
  padding: var(--space-8);
  align-items: center;
}
.agent-detail-page
  .agent-detail-page__hero-card--workspace
  .agent-detail-page__stage {
  flex: 0.7 1 0;
  min-width: 0;
  min-height: 0;
  align-self: center;
}
.agent-detail-page
  .agent-detail-page__hero-card--workspace
  .agent-detail-page__character {
  width: 300px;
  height: 300px;
  max-width: 100%;
}
.agent-detail-page
  .agent-detail-page__hero-card--workspace
  .agent-detail-page__side {
  flex: 1.8 1 0;
  min-width: 0;
}
.feature-workspace {
  container-type: inline-size;
  width: 100%;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-panel, var(--radius-card));
  background: var(--color-surface-white);
  color: var(--color-text-primary);
  box-shadow: var(--feature-ui-panel-shadow, var(--shadow-card));
  font-family: var(--font-ui);
  font-size: var(--font-body-small);
  line-height: var(--line-height-compact);
  text-align: left;
}
.feature-workspace *,
.feature-workspace *::before,
.feature-workspace *::after {
  box-sizing: border-box;
}
.feature-workspace strong {
  font-weight: var(--font-weight-strong);
}
.feature-workspace svg {
  display: block;
  flex: none;
  width: 20px;
  height: 20px;
}
.feature-workspace.feature-workspace--inbox {
  border-color: var(--color-edge-chrome);
  border-radius: var(--feature-ui-radius-panel, var(--radius-icon));
  box-shadow: var(--preview-shadow);
}
@media (min-width: 1200px) {
  .agent-detail-page
    .agent-detail-page__hero-card--workspace:has(.feature-workspace--inbox)
    .agent-detail-page__character {
    /* Use the character canvas's transparent edges without taking UI width. */
    width: 420px;
    height: 420px;
    max-width: none;
  }
}
.feature-workspace .inbox-preview {
  /* Fixed desktop typography; scale the whole artboard on smaller screens. */
  --font-body: 16px;
  --font-body-small: 14px;
  --font-caption: 12px;
  display: block;
  width: 100%;
  height: auto;
  color: var(--color-text-muted);
}
.inbox-preview text {
  fill: var(--color-text-primary);
  font-family: var(--font-ui);
  font-weight: var(--font-weight-body);
}
.inbox-preview__surface,
.inbox-preview__attachment {
  fill: var(--color-surface-white);
}
.inbox-preview__control,
.inbox-preview__customer-bubble {
  fill: var(--color-surface-white);
  filter: var(
    --feature-ui-svg-shadow,
    drop-shadow(
      0 2px 3px color-mix(in srgb, var(--color-brand-green) 6%, transparent)
    )
  );
}
.inbox-preview__background {
  fill: var(--color-page-background);
}
.inbox-preview__subtle {
  fill: var(--color-surface-subtle);
}
.inbox-preview__selected {
  fill: var(--color-surface-subtle);
  stroke: var(--preview-edge);
}
.inbox-preview__active-surface {
  fill: var(--color-accent-lime-soft);
  stroke: var(--preview-edge);
}
.inbox-preview__tone--lime {
  fill: var(--color-accent-lime-soft);
}
.inbox-preview__tone--mint {
  fill: var(--color-accent-mint-soft);
}
.inbox-preview__human-bubble {
  fill: var(--color-accent-mint-soft);
}
.inbox-preview__reply-bubble,
.inbox-preview__human-bubble,
.inbox-preview__attachment {
  filter: var(
    --feature-ui-svg-shadow,
    drop-shadow(
      0 2px 3px color-mix(in srgb, var(--color-brand-green) 7%, transparent)
    )
  );
}
.inbox-preview__tone--peach {
  fill: var(--color-accent-peach-soft);
}
.inbox-preview__tone--lavender {
  fill: var(--color-accent-lavender-soft);
}
.inbox-preview__tone--sky {
  fill: var(--color-accent-sky-soft);
}
.inbox-preview__accent {
  fill: var(--color-accent-lime);
  stroke: var(--preview-edge);
}
.inbox-preview__brand-mark {
  fill: var(--workspace-brand-paint);
  stroke: var(--preview-edge);
}
.inbox-preview__control,
.inbox-preview__active-surface,
.inbox-preview__selected {
  rx: var(--feature-ui-radius-control, 8px);
}
.inbox-preview__customer-bubble,
.inbox-preview__reply-bubble,
.inbox-preview__human-bubble,
.inbox-preview__attachment {
  rx: var(--feature-ui-radius-card, 12px);
}
.inbox-preview__brand-mark,
.inbox-preview__accent {
  rx: var(--feature-ui-radius-icon, 8px);
}
.inbox-preview__ink {
  fill: var(--color-text-primary);
}
.inbox-preview__online {
  fill: var(--color-status-success);
}
.inbox-preview__selection-mark {
  fill: var(--color-brand-green);
}
.inbox-preview__divider {
  fill: none;
  stroke: var(--feature-ui-border-color, var(--color-edge-chrome));
}
.inbox-preview__control,
.inbox-preview__customer-bubble,
.inbox-preview__attachment,
.inbox-preview__human-bubble,
.inbox-preview__reply-bubble {
  stroke: var(--feature-ui-border-color, var(--color-edge-chrome));
}
.inbox-preview .inbox-preview__brand {
  font-family: var(--font-brand);
  font-size: 18px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0;
}
.inbox-preview .inbox-preview__heading {
  font-size: 20px;
  font-weight: var(--font-weight-medium);
}
.inbox-preview .inbox-preview__body {
  font-size: var(--font-body);
}
.inbox-preview .inbox-preview__small,
.inbox-preview .inbox-preview__nav-label {
  font-size: var(--font-body-small);
}
.inbox-preview .inbox-preview__muted,
.inbox-preview .inbox-preview__nav-count,
.inbox-preview .inbox-preview__status-label {
  font-size: var(--font-caption);
}
.inbox-preview .inbox-preview__muted,
.inbox-preview .inbox-preview__time {
  fill: var(--color-text-muted);
}
.inbox-preview .inbox-preview__secondary {
  fill: var(--color-text-secondary);
}
.inbox-preview .inbox-preview__time {
  font-size: 11px;
}
.inbox-preview .inbox-preview__initial {
  font-size: var(--font-body-small);
  font-weight: var(--font-weight-medium);
}
.inbox-preview .inbox-preview__customer-initial {
  font-size: 22px;
  font-weight: var(--font-weight-medium);
}
.inbox-preview .inbox-preview__strong,
.inbox-preview__nav.is-current text {
  font-weight: var(--font-weight-medium);
}
.inbox-preview .inbox-preview__green,
.inbox-preview__nav.is-current {
  color: var(--color-brand-green);
}
.inbox-preview text.inbox-preview__green,
.inbox-preview__nav.is-current text {
  fill: var(--color-brand-green);
}
.inbox-preview .inbox-preview__primary {
  color: var(--color-text-primary);
}
.feature-workspace.feature-workspace--help-center {
  overflow: visible;
  border: 0;
  border-radius: var(--feature-ui-radius-panel, var(--radius-card-dense));
  background: transparent;
  box-shadow: var(--preview-shadow);
}
@media (min-width: 1200px) {
  .agent-detail-page
    .agent-detail-page__hero-card--workspace:has(
      .feature-workspace--help-center
    )
    .agent-detail-page__stage {
    flex: 1 1 0;
  }
  .agent-detail-page
    .agent-detail-page__hero-card--workspace:has(
      .feature-workspace--help-center
    )
    .agent-detail-page__character {
    width: min(420px, 100%);
    height: auto;
    aspect-ratio: 1;
  }
  .agent-detail-page
    .agent-detail-page__hero-card--workspace:has(
      .feature-workspace--help-center
    )
    .agent-detail-page__side {
    flex: 0 1 64%;
    max-width: 736px;
  }
  .feature-workspace.feature-workspace--help-center {
    width: 100%;
    max-width: 736px;
    margin-inline: auto 0;
  }
}
.feature-workspace .help-center-preview {
  /* Keep desktop type proportions while the complete artboard scales. */
  --font-body: 16px;
  --font-label: 15px;
  --font-heading-five: 18px;
  display: block;
  width: 100%;
  height: auto;
  color: var(--color-text-muted);
}
.help-center-preview text {
  fill: var(--color-text-primary);
  font-family: var(--font-ui);
  font-weight: var(--font-weight-body);
}
.help-center-preview__surface,
.help-center-preview__tag {
  fill: var(--color-surface-white);
}
.help-center-preview__search,
.help-center-preview__article,
.help-center-preview__support {
  fill: var(--color-surface-white);
  filter: var(
    --feature-ui-svg-shadow,
    drop-shadow(
      0 3px 6px color-mix(in srgb, var(--color-brand-green) 6%, transparent)
    )
  );
}
.help-center-preview__search {
  filter: var(
    --feature-ui-svg-shadow,
    drop-shadow(
      0 4px 9px color-mix(in srgb, var(--color-brand-green) 11%, transparent)
    )
  );
}
.help-center-preview__background {
  fill: var(--color-page-background);
}
.help-center-preview__logo {
  fill: var(--workspace-brand-paint);
  stroke: var(--preview-edge);
}
.help-center-preview__support-action {
  fill: var(--color-accent-lime-soft);
  stroke: var(--preview-edge);
}
.help-center-preview__dot {
  fill: var(--color-text-primary);
}
.help-center-preview__divider,
.help-center-preview__frame {
  fill: none;
  stroke: var(--feature-ui-border-color, var(--color-border-subtle));
}
.help-center-preview__search,
.help-center-preview__article,
.help-center-preview__support {
  stroke: var(--feature-ui-border-color, var(--color-border-subtle));
}
.help-center-preview__tag {
  fill-opacity: 0.85;
  stroke: var(--feature-ui-border-color, var(--color-border-subtle));
  stroke-opacity: 0.5;
}
.help-center-preview .help-center-preview__brand {
  font-family: var(--font-brand);
  font-size: 19px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0;
}
.help-center-preview .help-center-preview__heading {
  font-size: 30px;
  font-weight: var(--font-weight-heading);
}
.help-center-preview .help-center-preview__description {
  font-size: var(--font-body-small);
  fill: var(--color-text-secondary);
}
.help-center-preview .help-center-preview__label,
.help-center-preview .help-center-preview__topics-label {
  font-size: var(--font-caption);
  fill: var(--color-text-muted);
}
.help-center-preview .help-center-preview__placeholder {
  font-size: var(--font-label);
  fill: var(--color-text-muted);
}
.help-center-preview__topic-surface {
  fill: transparent;
  stroke: transparent;
}
.help-center-preview__topic.is-current {
  color: var(--color-brand-green);
}
.help-center-preview__topic.is-current .help-center-preview__topic-surface {
  fill: var(--color-surface-subtle);
  stroke: var(--preview-edge);
}
.help-center-preview__topic-indicator {
  fill: var(--color-brand-green);
}
.help-center-preview .help-center-preview__topic-title {
  font-size: var(--font-body-small);
  font-weight: var(--font-weight-medium);
  fill: var(--color-text-secondary);
}
.help-center-preview__topic.is-current .help-center-preview__topic-title {
  fill: var(--color-brand-green);
  font-weight: var(--font-weight-strong);
}
.help-center-preview__selected-mark {
  fill: var(--color-accent-mint-soft);
  stroke: var(--preview-edge);
}
.help-center-preview__search,
.help-center-preview__topic-surface {
  rx: var(--feature-ui-radius-control, 8px);
}
.help-center-preview__article,
.help-center-preview__support {
  rx: var(--feature-ui-radius-card, 12px);
}
.help-center-preview__logo,
.help-center-preview__selected-mark {
  rx: var(--feature-ui-radius-icon, 8px);
}
.help-center-preview__frame,
.help-center-preview clipPath rect {
  rx: var(--feature-ui-radius-panel, 24px);
}
.help-center-preview .help-center-preview__section-title {
  font-size: var(--font-heading-five);
  font-weight: var(--font-weight-strong);
}
.help-center-preview .help-center-preview__article-title {
  font-size: var(--font-body);
  font-weight: var(--font-weight-medium);
}
.help-center-preview .help-center-preview__article-description,
.help-center-preview .help-center-preview__reading-time,
.help-center-preview .help-center-preview__support-description {
  font-size: var(--font-caption);
  fill: var(--color-text-muted);
}
.help-center-preview .help-center-preview__support-title {
  font-size: var(--font-body-small);
  font-weight: var(--font-weight-strong);
}
.help-center-preview .help-center-preview__support-action-label {
  font-size: var(--font-caption);
  font-weight: var(--font-weight-medium);
}
.help-center-preview__chat-launcher {
  color: var(--color-text-primary);
  filter: var(
    --feature-ui-svg-shadow,
    drop-shadow(
      0 4px 9px color-mix(in srgb, var(--color-brand-green) 18%, transparent)
    )
  );
}
.help-center-preview__chat-launcher-surface {
  fill: var(--color-accent-lime);
  stroke: var(--preview-edge);
}

@media (min-width: 810px) and (max-width: 1199.98px) {
  .agent-detail-page
    .agent-detail-page__hero-card.agent-detail-page__hero-card--workspace {
    flex-direction: row;
    gap: var(--space-5);
    padding: var(--space-6);
  }
  .agent-detail-page
    .agent-detail-page__hero-card--workspace
    .agent-detail-page__stage {
    width: 1px;
    flex: 0.55 1 0;
  }
  .agent-detail-page
    .agent-detail-page__hero-card--workspace
    .agent-detail-page__character {
    width: 220px;
    height: 220px;
  }
  .agent-detail-page
    .agent-detail-page__hero-card--workspace
    .agent-detail-page__side {
    width: 1px;
    flex: 1.8 1 0;
  }
}

@media (max-width: 809.98px) {
  .agent-detail-page
    .agent-detail-page__hero-card.agent-detail-page__hero-card--workspace {
    gap: var(--space-3);
    padding: var(--space-4);
  }
  .agent-detail-page
    .agent-detail-page__hero-card--workspace
    .agent-detail-page__stage,
  .agent-detail-page
    .agent-detail-page__hero-card--workspace
    .agent-detail-page__side {
    flex: none;
    width: 100%;
  }
  .agent-detail-page
    .agent-detail-page__hero-card--workspace
    .agent-detail-page__character {
    width: 180px;
    height: 180px;
  }
  .feature-workspace {
    border-radius: var(--radius-card-dense);
  }
}
.handover-flow {
  --flow-ink: var(--color-text-primary);
  --flow-line: color-mix(
    in srgb,
    var(--color-brand-green) 75%,
    var(--color-surface-white)
  );
  width: 100%;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-panel, var(--radius-card));
  background: var(--color-surface-white);
  box-shadow: var(--preview-shadow);
  color: var(--flow-ink);
  font-family: var(--font-ui);
  font-size: var(--font-body-small);
  line-height: 1.5;
  text-align: left;
}
.handover-flow *,
.handover-flow *::before,
.handover-flow *::after {
  box-sizing: border-box;
}
.handover-flow svg {
  display: block;
  flex: none;
  width: 18px;
  height: 18px;
}
.handover-flow strong {
  font-weight: var(--font-weight-strong);
}
.handover-flow__header {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 10px);
  padding: var(--feature-ui-chrome-padding, 14px 20px);
  border-bottom: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
  background: var(--color-surface-white);
}
.handover-flow__header > strong {
  font-size: 15px;
}
.handover-flow__header-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--feature-ui-radius-icon, 10px);
  background: var(--preview-brand);
  color: var(--color-text-primary);
  box-shadow:
    var(--edge-highlight),
    0 2px 5px var(--preview-edge);
}
.handover-flow__badge {
  margin-left: auto;
  padding: var(--feature-ui-space-1, 4px) var(--feature-ui-space-2, 9px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  font-size: 12px;
  white-space: nowrap;
  background: var(--color-surface-white);
}
.handover-flow__canvas {
  padding: 14px 22px 12px;
  background-color: var(--color-page-background);
  background-image: radial-gradient(
    var(--color-border-subtle) 0.6px,
    transparent 0.6px
  );
  background-size: 16px 16px;
}
.handover-flow__customer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--feature-ui-space-2, 8px);
  width: fit-content;
  margin-inline: auto;
  padding: var(--feature-ui-space-2, 7px) var(--feature-ui-space-3, 13px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--radius-pill);
  background: var(--color-surface-white);
  font-size: 12px;
  box-shadow: var(--preview-shadow-small);
}
.handover-flow__customer > svg {
  width: 16px;
  height: 16px;
  color: var(--color-text-muted);
}
.handover-flow__message-dot {
  width: 5px;
  height: 5px;
  margin-left: 2px;
  border-radius: 50%;
  background: var(--color-brand-green);
}
.handover-flow__connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 21px;
  color: var(--color-text-secondary);
}
.handover-flow__connector i {
  position: relative;
  flex: 1;
  width: 1px;
  background: var(--flow-line);
}
.handover-flow__connector i::after {
  position: absolute;
  right: -2px;
  bottom: 1px;
  width: 5px;
  height: 5px;
  border-right: 1px solid var(--flow-line);
  border-bottom: 1px solid var(--flow-line);
  content: "";
  transform: rotate(45deg);
}
.handover-flow__connector--condition {
  height: 36px;
}
.handover-flow__connector--condition span {
  padding: var(--feature-ui-space-1, 5px) var(--feature-ui-space-2, 10px);
  background: var(--color-surface-white);
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
  text-wrap: balance;
}
.handover-flow__node {
  overflow: hidden;
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--radius-card-compact);
  background: var(--color-surface-white);
  box-shadow: var(--preview-shadow-small);
}
.handover-flow__node-main {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-3, 12px);
  padding: var(--feature-ui-space-3, 14px);
}
.handover-flow__node-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid
    color-mix(in srgb, var(--color-brand-green) 12%, transparent);
  border-radius: var(--feature-ui-radius-icon, 11px);
  color: var(--color-brand-green);
  background: var(--color-accent-mint-soft);
  box-shadow: var(--edge-highlight);
}
.handover-flow__node-copy {
  flex: 1;
  min-width: 0;
}
.handover-flow__node-copy > strong {
  display: block;
  font-size: 15px;
  line-height: 1.5;
}
.handover-flow__node-copy p {
  margin: 3px 0 0;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.65;
  text-wrap: pretty;
}
.handover-flow__ai-branch {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 8px);
  padding: var(--feature-ui-space-2, 8px) var(--feature-ui-space-3, 14px);
  border-top: 1px solid
    color-mix(in srgb, var(--color-brand-green) 9%, var(--color-surface-white));
  background: var(--preview-soft);
  color: var(--color-text-secondary);
  font-size: 12px;
}
.handover-flow__ai-branch > span {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 5px);
}
.handover-flow__ai-branch svg {
  width: 13px;
  height: 13px;
}
.handover-flow__ai-branch > svg {
  margin-left: auto;
}
.handover-flow__node--team .handover-flow__node-icon {
  background: var(--color-surface-subtle);
  color: var(--color-brand-green);
}
.handover-flow__status {
  flex: none;
  padding: var(--feature-ui-space-1, 4px) var(--feature-ui-space-2, 8px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-badge, 7px);
  color: var(--color-text-secondary);
  background: var(--color-surface-subtle);
  font-size: 12px;
  white-space: nowrap;
}
.handover-flow__node--human {
  border-color: var(--color-surface-inverse-raised);
  background: var(--color-surface-inverse);
  color: var(--color-surface-white);
  box-shadow:
    0 5px 14px color-mix(in srgb, var(--color-brand-green) 16%, transparent),
    inset 0 1px 0
      color-mix(in srgb, var(--color-surface-white) 16%, transparent);
}
.handover-flow__node--human .handover-flow__node-icon {
  background: var(--color-accent-lime-soft);
  color: var(--flow-ink);
}
.handover-flow__node--human .handover-flow__node-copy p {
  color: color-mix(in srgb, var(--color-surface-white) 76%, transparent);
}
.handover-flow__node--human .handover-flow__status {
  color: var(--color-accent-lime-soft);
  border-color: color-mix(
    in srgb,
    var(--color-accent-lime-soft) 25%,
    transparent
  );
  background: color-mix(in srgb, var(--color-accent-lime-soft) 7%, transparent);
}
.handover-flow__context {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 6px);
  padding: var(--feature-ui-space-2, 8px) var(--feature-ui-space-3, 14px);
  border-top: 1px solid
    color-mix(in srgb, var(--color-surface-white) 12%, transparent);
  color: color-mix(in srgb, var(--color-surface-white) 82%, transparent);
  font-size: 12px;
}
.handover-flow__context svg {
  width: 13px;
  height: 13px;
}
.handover-flow__availability {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--feature-ui-space-1, 6px);
  margin-top: 12px;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.65;
}
.handover-flow__availability svg {
  width: 13px;
  height: 13px;
  margin-top: 2px;
}

@media (max-width: 809.98px) {
  .handover-flow {
    border-radius: var(--feature-ui-radius-panel, var(--radius-card-dense));
  }
  .handover-flow__header {
    padding: var(--feature-ui-chrome-padding, 14px);
    gap: var(--feature-ui-space-2, 8px);
  }
  .handover-flow__canvas {
    padding: 16px 12px 14px;
  }
  .handover-flow__node-main {
    padding: var(--feature-ui-space-3, 12px);
    gap: var(--feature-ui-space-2, 9px);
    flex-wrap: wrap;
  }
  .handover-flow__node-icon {
    width: 30px;
    height: 30px;
    border-radius: var(--feature-ui-radius-icon, 9px);
  }
  .handover-flow__node-copy > strong {
    font-size: 14px;
  }
  .handover-flow__node-copy p {
    font-size: 12px;
  }
  .handover-flow__status {
    margin-left: 39px;
  }
  .handover-flow__node-copy {
    flex-basis: calc(100% - 39px);
  }
  .handover-flow__ai-branch,
  .handover-flow__context {
    padding-inline: var(--feature-ui-space-3, 12px);
  }
}
.product-tone-rose {
  background: var(--color-accent-rose-soft);
}
.agent-detail-page:has(.agent-detail-page__hero-card--voice),
.voice-detail {
  font-variant-east-asian: simplified;
}
.feature-availability-badge {
  display: inline-flex;
  flex: none;
  align-items: center;
  padding: var(--feature-ui-space-1, 4px) var(--feature-ui-space-2, 9px);
  border: 1px solid
    color-mix(in srgb, var(--color-feature-rose-accent) 14%, transparent);
  border-radius: var(--radius-pill);
  background: var(--color-accent-rose-soft);
  color: var(--color-feature-rose-accent);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  font-variant-east-asian: simplified;
  line-height: 1.5;
  letter-spacing: 0;
  vertical-align: middle;
  white-space: nowrap;
}
.feature-availability-badge--menu,
.feature-availability-badge--list {
  margin-left: 8px;
}
.agent-detail-page__head .feature-title-with-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--feature-ui-space-3, 12px) var(--feature-ui-space-5, 20px);
}
.feature-availability-badge--heading {
  padding: var(--feature-ui-space-1, 6px) var(--feature-ui-space-3, 12px);
  font-size: 14px;
}
.voice-preview {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-panel, var(--radius-card));
  background: var(--color-surface-white);
  box-shadow: var(--preview-shadow);
  color: var(--color-text-primary);
  font: var(--font-body-small)/1.6 var(--font-ui);
  font-variant-east-asian: simplified;
  text-align: left;
}
.voice-preview *,
.voice-preview *::before,
.voice-preview *::after {
  box-sizing: border-box;
}
.voice-preview svg {
  display: block;
  flex: none;
}
.voice-preview strong,
.voice-preview b {
  font-weight: var(--font-weight-strong);
}
.voice-preview p {
  margin: 0;
}
.voice-preview__chrome {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 9px);
  padding: var(--feature-ui-chrome-padding, 12px 16px);
  border-bottom: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
  background: var(--color-surface-white);
}
.voice-preview__chrome > strong {
  font-size: 14px;
}
.voice-preview__mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--feature-ui-radius-icon, 8px);
  background: var(--preview-brand);
  color: var(--color-text-primary);
  box-shadow:
    var(--edge-highlight),
    0 2px 5px var(--preview-edge);
}
.voice-preview__status {
  margin-left: auto;
  padding: var(--feature-ui-space-1, 4px) var(--feature-ui-space-2, 8px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  font-size: 12px;
  white-space: nowrap;
  background: var(--color-surface-white);
}
.voice-preview__body {
  display: grid;
  gap: var(--feature-ui-space-4, 16px);
  padding: var(--feature-ui-space-4, 16px);
  background: var(--color-surface-white);
}
.voice-input {
  min-width: 0;
  padding: var(--feature-ui-space-2, 10px) var(--feature-ui-space-3, 12px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 12px)
    var(--feature-ui-radius-card, 12px) var(--feature-ui-radius-card, 12px)
    var(--feature-ui-radius-tail, 4px);
  background: var(--color-surface-subtle);
  box-shadow: var(--edge-highlight);
}
.voice-reply {
  display: grid;
  min-width: 0;
  gap: var(--feature-ui-space-2, 9px);
  padding: var(--feature-ui-space-3, 12px);
  border: 1px solid var(--preview-edge);
  border-radius: var(--feature-ui-radius-card, 14px);
  background: linear-gradient(
    135deg,
    color-mix(
      in srgb,
      var(--color-accent-lime-soft) 28%,
      var(--color-surface-white)
    ),
    color-mix(
      in srgb,
      var(--color-accent-mint-soft) 32%,
      var(--color-surface-white)
    )
  );
  box-shadow: var(--edge-highlight);
}
.voice-preview__speaker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--feature-ui-space-2, 8px);
  color: var(--color-text-secondary);
  font-size: 12px;
}
.voice-preview__speaker small {
  color: var(--color-text-muted);
  font-size: 12px;
}
.voice-message {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 10px);
  padding: var(--feature-ui-space-2, 8px) 0;
  color: var(--color-brand-green);
}
.voice-message__mic {
  display: grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-surface-white);
  box-shadow: var(--preview-shadow-small);
}
.voice-message__wave {
  display: flex;
  align-items: center;
  flex: 1;
  gap: var(--feature-ui-space-1, 4px);
  height: 24px;
  min-width: 0;
  overflow: hidden;
}
.voice-message__wave i {
  flex: 1 0 2px;
  max-width: 4px;
  height: calc(var(--voice-bar-height) * 0.65);
  border-radius: var(--radius-pill);
  background: var(--color-brand-green);
}
.voice-message__duration {
  flex: none;
  font-family: var(--font-mono);
  font-size: 12px;
}
.voice-message__language {
  font-size: 12px;
}
.voice-transcript {
  padding-top: 8px;
  border-top: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
}
.voice-transcript p {
  font-size: 13px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.voice-transcript > small {
  display: block;
  margin-top: 4px;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.6;
}
.voice-preview__reply-label {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 6px);
  margin-top: 0;
  color: var(--color-brand-green);
  font-size: 12px;
}
.voice-preview__answer {
  color: var(--color-text-secondary);
  font-size: 13px;
  line-height: 1.6;
}
.voice-product {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: var(--feature-ui-space-3, 12px);
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 10px);
  background: var(--color-surface-white);
  box-shadow: var(--preview-shadow-small);
}
.voice-product__image {
  align-self: stretch;
  display: grid;
  place-items: center;
  min-height: 88px;
  background: var(--color-page-background);
  color: var(--color-brand-green);
}
.voice-product__drawing {
  width: 88px;
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 3px 3px var(--preview-edge));
}
.voice-product__info {
  min-width: 0;
  padding: var(--feature-ui-space-2, 10px) var(--feature-ui-space-3, 12px)
    var(--feature-ui-space-2, 10px) 0;
}
.voice-product__info > strong {
  display: block;
  font-size: 14px;
  line-height: 1.4;
}
.voice-product__info small {
  display: block;
  margin-top: 4px;
  color: var(--color-text-muted);
  font-size: 12px;
}
.voice-product__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--feature-ui-space-1, 4px) var(--feature-ui-space-3, 12px);
  margin-top: 6px;
}
.voice-product__price b {
  font-size: 14px;
}
.voice-product__price small {
  margin: 0;
}
.voice-documents {
  display: grid;
  gap: var(--feature-ui-space-1, 6px);
}
.voice-documents:empty {
  display: none;
}
.voice-document {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 10px);
  min-width: 0;
  padding: var(--feature-ui-space-2, 8px) var(--feature-ui-space-2, 10px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 10px);
  background: var(--color-surface-white);
  box-shadow: var(--preview-shadow-small);
}
.voice-document__mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 30px;
  border-radius: var(--feature-ui-radius-icon, 7px);
  background: var(--color-accent-mint-soft);
  color: var(--color-brand-green);
  box-shadow:
    var(--edge-highlight),
    inset 0 0 0 1px var(--preview-edge);
}
.voice-document > div {
  flex: 1;
  min-width: 0;
}
.voice-document strong {
  display: block;
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.voice-document small {
  display: block;
  margin-top: 1px;
  color: var(--color-text-muted);
  font-size: 12px;
}
.voice-preview__citation {
  display: flex;
  align-items: flex-start;
  gap: var(--feature-ui-space-1, 6px);
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.5;
}
.voice-preview__citation > svg {
  margin-top: 2px;
}
.voice-preview__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--feature-ui-space-1, 6px) var(--feature-ui-space-3, 12px);
}
.voice-preview__actions > span {
  display: inline-flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 6px);
  padding: var(--feature-ui-space-1, 4px) 0;
  color: var(--color-brand-green);
  font-size: 12px;
}
.voice-preview__foot {
  display: flex;
  align-items: flex-start;
  gap: var(--feature-ui-space-1, 6px);
  padding: var(--feature-ui-foot-padding, 9px 16px);
  border-top: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.5;
  background: var(--color-surface-white);
}
.voice-preview__foot > svg {
  margin-top: 3px;
}
.voice-detail__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 64px;
}
.voice-detail--reverse .voice-detail__copy {
  order: 2;
}
.voice-detail__copy h2 {
  font-size: var(--font-heading-two);
  text-wrap: balance;
}
.voice-detail__copy > p {
  margin-top: 24px;
  color: var(--color-text-secondary);
  font-size: var(--font-body-large);
  line-height: 1.8;
}
.voice-detail__copy ul {
  display: grid;
  gap: 18px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  color: var(--color-text-secondary);
  font-size: var(--font-body);
  line-height: 1.75;
}
.voice-detail__copy li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.voice-detail__copy li > svg {
  flex: none;
  margin-top: 5px;
  color: var(--color-brand-green);
}
.voice-detail__visual {
  min-width: 0;
  margin: 0;
  padding: 20px;
  border-radius: var(--radius-panel);
  background:
    radial-gradient(
      ellipse at top left,
      color-mix(in srgb, var(--color-surface-white) 70%, transparent),
      transparent 72%
    ),
    var(--color-accent-rose-soft);
  box-shadow: inset 0 1px 0 var(--color-surface-white);
}
.voice-detail__visual figcaption {
  margin-top: 10px;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.6;
}
.voice-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--feature-ui-space-2, 6px);
  margin-bottom: 12px;
}
.voice-tabs > button {
  min-height: var(--control-target);
  min-width: 0;
  padding: var(--feature-ui-space-2, 9px) var(--feature-ui-space-1, 6px);
  border: 0;
  border-radius: var(--feature-ui-radius-control, 9px);
  background: var(--color-surface-white);
  color: var(--color-text-secondary);
  font: var(--font-weight-medium) var(--font-body-small)/1.5 var(--font-ui);
  cursor: pointer;
  box-shadow:
    inset 0 0 0 1px var(--preview-edge),
    var(--shadow-input);
  transition:
    background-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease;
}
.voice-tabs > button:hover:not([aria-selected="true"]) {
  background: var(--color-surface-subtle);
  color: var(--color-brand-green);
}
.voice-tabs > button[aria-selected="true"] {
  background: var(--color-surface-inverse);
  color: var(--color-surface-white);
  box-shadow: var(--feature-ui-control-shadow, var(--shadow-input));
}
.voice-tabs > button:focus-visible,
.voice-showcase__panel:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}
.voice-showcase__panel {
  border-radius: var(--radius-card);
}
.voice-channel-matrix__body {
  display: grid;
  gap: var(--feature-ui-space-2, 10px);
  padding: var(--feature-ui-space-3, 14px) var(--feature-ui-space-4, 16px);
  background: var(--color-surface-white);
}
.voice-channel-matrix__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--feature-ui-space-2, 10px);
  padding: var(--feature-ui-space-2, 8px) var(--feature-ui-space-2, 10px);
  border: 1px solid var(--preview-edge);
  border-radius: var(--feature-ui-radius-card, 10px);
  background: var(--color-surface-subtle);
  color: var(--color-text-secondary);
  font-size: 12px;
}
.voice-channel-list {
  padding-inline: var(--feature-ui-space-2, 10px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 12px);
  background: var(--color-surface-white);
  box-shadow: var(--preview-shadow-small);
}
.voice-channel {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: var(--feature-ui-space-2, 10px);
  padding: var(--feature-ui-space-3, 11px) 0;
}
.voice-channel + .voice-channel {
  border-top: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
}
.voice-channel__logo {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--feature-ui-radius-icon, 9px);
  background: var(--color-surface-subtle);
  box-shadow:
    inset 0 0 0 1px var(--preview-edge),
    var(--edge-highlight);
}
.voice-channel__logo .social-brand-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}
.voice-channel strong {
  display: block;
  font-size: 13px;
}
.voice-channel p {
  margin-top: 2px;
  color: var(--color-text-secondary);
  font-size: 12px;
}
.voice-channel-matrix__fallback {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 8px);
  padding: var(--feature-ui-space-2, 10px);
  border-radius: var(--feature-ui-radius-card, 8px);
  background: var(--color-surface-subtle);
  box-shadow: inset 0 0 0 1px var(--preview-edge);
}
.voice-channel-matrix__fallback > svg {
  color: var(--color-brand-green);
}
.voice-channel-matrix__fallback > div {
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--feature-ui-space-2, 10px);
}
.voice-channel-matrix__fallback strong {
  font-size: 12px;
}
.voice-channel-matrix__fallback p {
  color: var(--color-text-muted);
  font-size: 12px;
}
.voice-inbox__handoff {
  padding: var(--feature-ui-space-3, 12px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 10px);
  background: var(--color-surface-white);
  box-shadow: var(--preview-shadow-small);
}
.voice-inbox__summary {
  display: flex;
  align-items: flex-start;
  gap: var(--feature-ui-space-2, 10px);
}
.voice-inbox__summary > svg {
  margin-top: 3px;
  color: var(--color-brand-green);
}
.voice-inbox__summary strong {
  font-size: 13px;
}
.voice-inbox__summary p {
  margin-top: 3px;
  color: var(--color-text-secondary);
  font-size: 13px;
}
.voice-inbox__reply {
  color: var(--color-text-secondary);
  font-size: 13px;
}
.voice-inbox__facts {
  display: grid;
  gap: var(--feature-ui-space-1, 6px);
  margin: 10px 0 0;
  padding: var(--feature-ui-space-2, 10px) 0 0;
  border-top: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
}
.voice-inbox__facts > div {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--feature-ui-space-2, 10px);
  font-size: 12px;
}
.voice-inbox__facts dt {
  color: var(--color-text-muted);
}
.voice-inbox__facts dd {
  margin: 0;
  color: var(--color-text-primary);
}
.voice-order {
  padding: var(--feature-ui-space-3, 12px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 10px);
  background: var(--color-surface-white);
  box-shadow: var(--preview-shadow-small);
}
.voice-order > div {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 8px);
}
.voice-order > div > span {
  margin-left: auto;
  padding: 3px var(--feature-ui-space-2, 8px);
  border-radius: var(--feature-ui-radius-card, 6px);
  background: var(--color-accent-mint-soft);
  color: var(--color-brand-green);
  font-size: 12px;
}
.voice-order ol {
  display: flex;
  padding: 0;
  margin: 18px 0 4px;
  list-style: none;
}
.voice-order li {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--feature-ui-space-2, 7px);
  color: var(--color-text-secondary);
  font-size: 12px;
}
.voice-order li i {
  position: relative;
  z-index: 1;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid var(--color-border-default);
  background: var(--color-surface-white);
}
.voice-order li[data-complete="true"] i {
  border-color: var(--color-brand-green);
  background: var(--color-brand-green);
  box-shadow: 0 0 0 3px var(--color-accent-mint-soft);
}
.voice-order li em {
  position: absolute;
  top: 3px;
  left: 4px;
  width: 100%;
  height: 1px;
  background: var(--color-border-default);
}
.voice-order li[data-complete="true"]:has(+ li[data-complete="true"]) em {
  background: var(--color-brand-green);
}
@media (max-width: 1199.98px) {
  .voice-detail__layout {
    gap: 32px;
  }
  .voice-detail__visual {
    padding: 18px;
  }
  .voice-product {
    grid-template-columns: 80px minmax(0, 1fr);
  }
}
@media (max-width: 809.98px) {
  .voice-preview {
    border-radius: var(--feature-ui-radius-panel, var(--radius-card-dense));
  }
  .voice-preview__chrome {
    padding: var(--feature-ui-chrome-padding, 12px);
    gap: var(--feature-ui-space-2, 8px);
    flex-wrap: wrap;
  }
  .voice-preview__chrome > strong {
    font-size: 13px;
  }
  .voice-preview__status {
    font-size: 12px;
  }
  .voice-preview__body,
  .voice-preview--compact .voice-preview__body {
    padding: var(--feature-ui-space-3, 12px);
    gap: var(--feature-ui-space-3, 14px);
  }
  .voice-message {
    gap: var(--feature-ui-space-2, 8px);
  }
  .voice-message__wave {
    gap: 3px;
  }
  .voice-message__wave i:nth-child(n + 20) {
    display: none;
  }
  .voice-product,
  .voice-preview--compact .voice-product {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: var(--feature-ui-space-2, 10px);
  }
  .voice-product__image {
    min-height: 88px;
  }
  .voice-product__info {
    padding-right: 9px;
  }
  .voice-product__info > strong {
    font-size: 13px;
  }
  .voice-product__price {
    gap: var(--feature-ui-space-1, 4px);
  }
  .voice-document {
    padding: var(--feature-ui-space-2, 9px);
    gap: var(--feature-ui-space-2, 8px);
  }
  .voice-preview__foot {
    padding: var(--feature-ui-foot-padding, 10px 12px);
  }
  .voice-detail__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .voice-detail--reverse .voice-detail__copy {
    order: initial;
  }
  .voice-detail__copy > p {
    margin-top: 20px;
    font-size: var(--font-body);
    line-height: 1.75;
  }
  .voice-detail__copy ul {
    margin-top: 24px;
    gap: 14px;
  }
  .voice-detail__visual {
    padding: 14px;
    border-radius: var(--radius-card);
  }
  .voice-tabs > button {
    padding-inline: var(--feature-ui-space-1, 4px);
    font-size: 13px;
  }
  .voice-channel-matrix__body {
    padding: var(--feature-ui-space-3, 12px);
  }
  .voice-channel-matrix__heading {
    gap: var(--feature-ui-space-2, 8px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .voice-tabs > button {
    transition: none;
  }
}
.related-solutions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
  font-family: var(--font-ui);
}
.related-solutions-grid,
.related-solutions-grid * {
  box-sizing: border-box;
}
.related-solution-card {
  position: relative;
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  background: var(--color-surface-white);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  transition:
    border-color var(--duration-ui) ease,
    box-shadow var(--duration-ui) ease;
}
.related-solution-card__thumbnail {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-control);
  background: var(--color-surface-subtle);
}
.related-solution-card__thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.related-solution-card__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}
.related-solution-card__meta,
.related-solution-card__title,
.related-solution-card__subtitle,
.related-solution-card__summary {
  margin: 0;
  overflow-wrap: anywhere;
}
.related-solution-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding-right: 36px;
  color: var(--color-text-muted);
  font-size: var(--font-caption);
  line-height: var(--line-height-compact);
}
.related-solution-card__scenario {
  color: var(--color-brand-green);
  font-weight: var(--font-weight-medium);
}
.related-solution-card__title {
  padding-right: 36px;
  font-size: var(--font-heading-five);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-heading);
}
.related-solution-card__summary {
  color: var(--color-text-secondary);
  font-size: var(--font-body-small);
  line-height: var(--line-height-ui);
}
.related-solution-card__subtitle {
  color: var(--color-text-primary);
  font-size: var(--font-body-small);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-ui);
}
.related-solution-card__arrow {
  position: absolute;
  top: 20px;
  right: 20px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-surface-subtle);
  color: var(--color-brand-green);
  transition:
    color var(--duration-ui) ease,
    background-color var(--duration-ui) ease;
}
.related-solution-card__arrow svg {
  transition: transform var(--duration-ui) ease;
}
.related-solution-card:is(:hover, :focus-visible) {
  border-color: var(--color-brand-green);
  box-shadow: var(--shadow-card-hover);
}
.related-solution-card:is(:hover, :focus-visible)
  .related-solution-card__arrow {
  background: var(--color-brand-green);
  color: var(--color-surface-white);
}
.related-solution-card:is(:hover, :focus-visible)
  .related-solution-card__arrow
  svg {
  transform: translate(1px, -1px);
}
@media (prefers-reduced-motion: reduce) {
  .related-solution-card,
  .related-solution-card__arrow,
  .related-solution-card__arrow svg {
    transition: none;
  }
  .related-solution-card:is(:hover, :focus-visible)
    .related-solution-card__arrow
    svg {
    transform: none;
  }
}

@media (max-width: 1199.98px) {
  .related-solutions-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}
@media (max-width: 809.98px) {
  .related-solution-card {
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: start;
    gap: 12px 16px;
    padding: 16px;
  }
  .related-solution-card__thumbnail {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  .related-solution-card__content {
    display: contents;
  }
  .related-solution-card__meta,
  .related-solution-card__title {
    grid-column: 2;
  }
  .related-solution-card__title {
    padding-right: 0;
  }
  .related-solution-card__subtitle,
  .related-solution-card__summary {
    grid-column: 1 / -1;
  }
  .related-solution-card__arrow {
    top: 16px;
    right: 16px;
  }
}
.feature-tools {
  display: grid;
  gap: 12px;
  width: 100%;
  min-width: 0;
  font-family: var(--font-ui);
}
.feature-tools,
.feature-tools * {
  box-sizing: border-box;
}
.feature-tools__meta {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-body-small);
  line-height: var(--line-height-compact);
}
.feature-tools__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.feature-tool {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  background: var(--color-surface-white);
  box-shadow: var(--shadow-card);
  color: var(--color-text-primary);
}
.feature-tool__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--color-border-subtle);
  border-radius: 14px;
  background: var(--color-surface-subtle);
  color: var(--color-brand-green);
}
.feature-tool__icon svg {
  display: block;
  width: 24px;
  height: 24px;
}
.feature-tool__content {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  min-width: 0;
}
.feature-tool__heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.feature-tool__title {
  margin: 0;
  font-size: var(--font-heading-four);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-heading);
  overflow-wrap: anywhere;
}
.feature-tool__status {
  padding: 3px 8px;
  border: 1px solid var(--color-border-subtle);
  border-radius: 999px;
  background: var(--color-surface-subtle);
  color: var(--color-text-secondary);
  font-size: var(--font-caption);
  line-height: var(--line-height-compact);
}
.feature-tool__summary {
  margin: 8px 0 0;
  color: var(--color-text-secondary);
  font-size: var(--font-body);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
  overflow-wrap: anywhere;
}
.feature-tool__scope {
  margin: auto 0 0;
  padding-top: 12px;
  color: var(--color-brand-green);
  font-size: var(--font-body-small);
  line-height: var(--line-height-compact);
  overflow-wrap: anywhere;
}

@media (max-width: 809.98px) {
  .feature-tools__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .feature-tool {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
    padding: 18px;
  }
  .feature-tool__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }
  .feature-tool__heading {
    gap: 6px 8px;
  }
  .feature-tool__status {
    padding: 2px 7px;
  }
  .feature-tool__scope {
    padding-top: 10px;
  }
}
/* Keep the shared header mounted while static page content becomes interactive. */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--layer-header);
}

/* Shared content container, responsive section rhythm, cards and 810/1200px
   breakpoints as the purchased layout. All colors reference existing tokens. */
:where(.product-section, .product-page, .product-nav) {
  font-family: var(--font-ui);
  color: var(--color-text-primary);
  font-size: var(--font-body);
  line-height: var(--line-height-ui);
  box-sizing: border-box;
}
:where(.product-section, .product-page, .product-nav) * {
  box-sizing: border-box;
}
:where(.product-section, .product-page, .product-nav) a {
  color: inherit;
  text-decoration: none;
}
:where(.product-section, .product-page, .product-nav) button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
:where(.product-section, .product-page, .product-nav)
  :is(a, button, summary):focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}
:where(.product-section, .product-page, .product-nav) :is(h1, h2, h3, p) {
  margin: 0;
}
:where(.product-section, .product-page) :is(h1, h2, h3) {
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-heading);
  text-wrap: wrap;
  letter-spacing: 0;
}
.product-shell {
  width: 100%;
  max-width: var(--width-content);
  margin-inline: auto;
}
.product-section {
  padding: var(--space-section) var(--space-page-inline);
  width: 100%;
  position: relative;
  scroll-margin-top: 90px;
}
.product-section--subtle {
  background: var(--color-surface-subtle);
}
.product-heading {
  max-width: 800px;
  margin-bottom: 56px;
}
.product-eyebrow {
  display: block;
  font-size: var(--font-caption);
  letter-spacing: 0;
  color: var(--color-text-muted);
  margin-bottom: 20px;
}
.product-heading h2,
.product-panel-copy h2 {
  font-size: var(--font-heading-two);
}
.product-heading > p {
  font-size: var(--font-lead);
  color: var(--color-text-secondary);
  margin-top: 24px;
  line-height: 1.65;
}
.product-heading-phrase {
  display: inline;
}
.product-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.product-tone-lime {
  background: var(--color-accent-lime-soft);
}
.product-tone-mint {
  background: var(--color-accent-mint-soft);
}
.product-tone-peach {
  background: var(--color-accent-peach-soft);
}
.product-tone-lavender {
  background: var(--color-accent-lavender-soft);
}
.product-tone-sky {
  background: var(--color-accent-sky-soft);
}
.product-tone-butter {
  background: var(--color-accent-butter-soft);
}
/* End feature palette. */
.product-feature-card {
  border-radius: var(--radius-card);
  box-shadow:
    var(--edge-card),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  padding: 28px 28px 0;
  min-height: 414px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.3s ease;
}
.product-feature-card:hover {
  transform: translateY(-4px);
}
.product-feature-symbol {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid
    color-mix(in srgb, var(--color-text-primary) 12%, transparent);
  border-radius: 50%;
  margin-bottom: 24px;
}
.product-feature-card h3 {
  font-size: var(--font-heading-three);
  margin-bottom: 16px;
}
.product-feature-card > p {
  font-size: var(--font-body);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
}
.product-feature-bottom {
  position: relative;
  min-height: 176px;
  margin-top: auto;
  display: flex;
  align-items: center;
}
.product-card-character {
  position: absolute;
  bottom: -3px;
  right: -14px;
  width: 176px;
  height: 176px;
}
.product-text-link {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-size: var(--font-label);
  position: relative;
  z-index: 1;
  background: var(--color-surface-white);
  border-radius: 100px;
  padding: 10px 17px;
}
.product-text-link:hover {
  background: var(--color-surface-inverse);
  color: var(--color-surface-white);
}
.product-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.product-tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  border-bottom: 1px solid var(--color-border-subtle);
  padding-bottom: 20px;
  margin-bottom: 40px;
}
.product-tabs button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  padding: 18px 6px;
  font-size: var(--font-label);
  transition: background 0.2s;
}
.product-tabs button[aria-selected="true"] {
  background: var(--color-surface-inverse);
  color: var(--color-surface-white);
}
.product-tabs button:hover:not([aria-selected="true"]) {
  background: var(--color-accent-lime-soft);
}
.product-feature-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: 60px;
}
.product-feature-panel[hidden] {
  display: none !important;
}
.product-panel-copy h3 {
  font-size: var(--font-heading-three);
  max-width: 100%;
  margin-bottom: 24px;
}
.product-panel-copy > p {
  color: var(--color-text-secondary);
  font-size: var(--font-body-large);
  line-height: 1.8;
  margin-top: 24px;
}
.product-panel-copy ul {
  list-style: none;
  padding: 0;
  margin: 28px 0 36px;
  display: grid;
  gap: 18px;
}
.product-panel-copy li {
  position: relative;
  padding-left: 28px;
  color: var(--color-text-secondary);
}
.product-panel-copy li:before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-text-primary);
}
.product-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--button-gap);
  min-height: var(--control-target-primary);
  border-radius: var(--radius-pill);
  padding: var(--button-padding-block) var(--button-padding-inline);
  background: var(--color-surface-subtle);
  box-shadow: var(--edge-card);
  font-size: var(--font-label);
  line-height: var(--line-height-compact);
  transition:
    background-color var(--duration-feedback) var(--ease-ui),
    transform var(--duration-feedback) var(--ease-ui);
}
.product-button:hover {
  transform: translateY(-2px);
  background: var(--color-accent-lime-soft);
}
.product-button--dark {
  background: var(--color-surface-inverse);
  color: var(--color-surface-white) !important;
}
.product-button--dark:hover {
  background: var(--color-surface-inverse-hover);
}
.product-demo-stage {
  padding: 36px;
  border-radius: var(--radius-card);
  min-width: 0;
}
.product-nav {
  width: 100%;
  position: relative;
  isolation: isolate;
}
.product-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--surface-header);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-header);
  pointer-events: none;
}
.product-nav-inner {
  height: var(--site-header-height);
  max-width: var(--width-shell);
  padding: 16px 40px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  gap: 20px;
}
.product-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -1px;
  white-space: nowrap;
}
.product-brand img {
  object-fit: contain;
}
.product-ui-icon {
  display: block;
  flex-shrink: 0;
}
.product-nav-desktop {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(240, 244, 238, 0.8);
  box-shadow: inset 0 0 0 1px rgba(14, 35, 23, 0.05);
  border-radius: var(--radius-pill);
  padding: 6px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.product-nav-desktop > a,
.product-nav-group > button {
  display: flex;
  align-items: center;
  padding: 10px 18px;
  border: 0;
  background: transparent;
  white-space: nowrap;
  border-radius: 100px;
  font-size: var(--font-label);
  line-height: 1.6;
}
.product-nav-desktop > a:hover,
.product-nav-group > button:hover,
.product-nav-group > button.is-open {
  background: var(--color-surface-white);
}
.product-nav-desktop > a[aria-current],
.product-nav-group > button[data-current] {
  color: var(--color-brand-green);
}
.product-nav-desktop > a:focus-visible,
.product-nav-group > button:focus-visible {
  outline-offset: var(--focus-offset-inset);
}
.product-nav-desktop:has(> a:hover, > .product-nav-group > button:hover)
  .product-nav-group
  > button.is-open:not(:hover) {
  background: transparent;
}
.product-caret {
  margin-left: 7px;
  display: flex;
  transition: transform var(--duration-ui);
}
.product-nav-group > button.is-open .product-caret {
  transform: rotate(180deg);
}
.product-nav-hover-bridge {
  position: absolute;
  top: 100%;
  left: 50%;
  width: min(var(--width-menu), calc(100vw - 80px));
  height: 16px;
  transform: translateX(-50%);
}
.product-nav-dropdown {
  position: fixed;
  top: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%);
  width: min(800px, calc(100vw - 80px));
  max-height: calc(100dvh - var(--site-header-height) - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px 24px 24px;
  background: var(--surface-overlay);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--color-edge-chrome);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-menu);
  animation: product-menu-in var(--duration-enter) var(--ease-ui);
}
.product-nav-group--resources {
  position: relative;
}
.product-nav-group--resources .product-nav-hover-bridge {
  width: 300px;
  height: 22px;
}
.product-nav-dropdown--resources {
  position: absolute;
  top: calc(100% + 22px);
  width: 300px;
  padding: 10px;
}
.product-nav-resource-list {
  display: grid;
  gap: 4px;
}
.product-nav-resource-list > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 64px;
  padding: 12px 14px;
  border-radius: var(--radius-control);
}
.product-nav-resource-list > a:is(:hover, :focus-visible, [aria-current]) {
  background: var(--color-surface-subtle);
}
.product-nav-resource-list strong {
  display: block;
  font-size: var(--font-label);
  line-height: 1.5;
  font-weight: 500;
}
.product-nav-resource-list small {
  display: block;
  font-size: var(--font-caption);
  line-height: 1.6;
  color: var(--color-text-muted);
  margin-top: 3px;
}
.product-nav-resource-list .product-ui-icon {
  color: var(--color-text-muted);
}
.product-nav-sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.product-nav-section + .product-nav-section {
  padding-left: 20px;
  border-left: 1px solid var(--color-border-subtle);
}
.product-nav .product-nav-section-title {
  margin: 0 10px 10px;
  color: var(--color-text-muted);
  font-size: var(--font-caption);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
}
.product-nav-feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
}
.product-nav-feature-grid > a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  min-height: 64px;
  border-radius: 14px;
  min-width: 0;
}
.product-nav-feature-grid
  > a:is(:hover, :focus-visible, [aria-current="page"]) {
  background: var(--color-surface-subtle);
}
.product-nav-feature-copy {
  flex: 1;
  min-width: 0;
}
.product-nav-feature-arrow {
  display: flex;
  opacity: 0;
  transform: translateX(-3px);
  transition:
    opacity var(--duration-ui),
    transform var(--duration-ui);
}
.product-nav-feature-grid
  > a:is(:hover, :focus-visible, [aria-current="page"])
  .product-nav-feature-arrow {
  opacity: 1;
  transform: none;
}
.product-nav-feature-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 12px;
}
.product-nav-feature-icon svg {
  width: 22px;
  height: 22px;
}
.product-nav-feature-grid strong {
  display: block;
  font-size: var(--font-label);
  font-weight: 500;
  line-height: 1.5;
}
.product-nav-feature-grid small {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--font-caption);
  line-height: 1.6;
  margin-top: 3px;
}
.product-nav-dropdown--products .product-nav-feature-grid small {
  white-space: normal;
  overflow-wrap: anywhere;
  text-wrap: wrap;
}
.product-nav-toggle,
.product-nav-mobile {
  display: none;
}
.product-page-hero {
  padding: 100px 40px 20px;
  max-width: 1328px;
}
.product-page h1 {
  font-size: var(--font-heading-one);
  max-width: 100%;
  margin: 24px 0;
}
.product-page-hero > p {
  font-size: var(--font-lead);
  max-width: 800px;
  color: var(--color-text-secondary);
  margin: 24px 0 36px;
}
.product-detail-hero {
  padding: 100px 40px;
  max-width: 1328px;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 80px;
  align-items: center;
}
.product-detail-hero h1 {
  font-size: var(--font-heading-one);
}
.product-detail-hero p {
  font-size: var(--font-lead);
  line-height: 1.8;
  color: var(--color-text-secondary);
}
.product-breadcrumb {
  color: var(--color-text-muted) !important;
  font-size: var(--font-body-small);
}
.product-detail-character {
  border-radius: 50%;
  padding: 26px;
  aspect-ratio: 1;
  max-width: 360px;
  min-width: 0;
}
.product-detail-character > div {
  aspect-ratio: 1;
}
.product-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
.product-result {
  border-top: 1px solid var(--color-border-default);
  padding-top: 20px;
  font-size: var(--font-label) !important;
}
.product-steps {
  padding: 0;
  margin: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.product-steps li {
  border-radius: 24px;
  padding: 32px;
  background: var(--color-surface-subtle);
}
.product-steps li > span {
  display: block;
  font-family: var(--font-mono);
  margin-bottom: 36px;
  color: var(--color-text-muted);
  font-size: var(--font-caption);
}
.product-steps h3 {
  font-size: var(--font-heading-three);
  margin-bottom: 16px;
}
.product-steps p {
  color: var(--color-text-muted);
}
.product-faq {
  display: grid;
  gap: 12px;
  max-width: 900px;
}
.product-faq details {
  background: var(--color-surface-white);
  padding: 24px 28px;
  border-radius: 20px;
}
.product-faq summary {
  cursor: pointer;
  font-weight: 500;
}
.product-faq p {
  margin-top: 20px;
  color: var(--color-text-secondary);
  line-height: 1.8;
}
@keyframes product-menu-in {
  from {
    opacity: 0;
    translate: 0 -6px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@media (min-width: 810px) and (max-width: 1199.98px) {
  .product-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .product-feature-panel {
    gap: 32px;
  }
  .product-demo-stage {
    padding: 24px;
  }
  .product-detail-hero {
    gap: 40px;
  }
  .product-detail-hero h1 {
    font-size: var(--font-heading-one);
  }
  .product-nav-desktop > a,
  .product-nav-group > button {
    padding: 10px 12px;
  }
  .product-brand {
    font-size: 23px;
  }
  .product-nav-inner {
    padding-inline: 32px;
  }
  .product-nav-cta {
    padding: 12px 20px;
  }
}
@media (max-width: 1199.98px) {
  .product-nav-desktop,
  .product-nav-cta {
    display: none;
  }
  .product-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: var(--color-surface-subtle);
    border: 0;
    border-radius: 50%;
    font-size: 25px;
    line-height: 1;
  }
  .product-nav-mobile {
    display: block;
    position: absolute;
    top: 100%;
    inset-inline: 0;
    width: 100%;
    background: var(--surface-overlay);
    border-top: 1px solid var(--color-border-subtle);
    border-bottom: 1px solid var(--color-border-subtle);
    max-height: calc(100dvh - var(--site-header-height));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    box-shadow: var(--shadow-menu);
  }
  .product-nav-mobile-inner {
    max-width: 760px;
    margin: auto;
    padding: 16px max(20px, env(safe-area-inset-right))
      max(24px, env(safe-area-inset-bottom))
      max(20px, env(safe-area-inset-left));
  }
  .product-nav-mobile .product-nav-sections {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  .product-nav-mobile .product-nav-section + .product-nav-section {
    padding: 16px 0 0;
    border-left: 0;
    border-top: 1px solid var(--color-border-subtle);
  }
  .product-nav-mobile .product-nav-section-title {
    margin: 0 4px 8px;
    font-size: var(--font-caption);
  }
  .product-nav-mobile .product-nav-feature-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
  .product-nav-mobile .product-nav-feature-grid > a {
    padding: 8px;
    min-height: 48px;
    gap: 9px;
    border-radius: 10px;
  }
  .product-nav-mobile .product-nav-feature-grid strong {
    font-size: var(--font-body-small);
    line-height: 1.4;
  }
  .product-nav-mobile .product-nav-feature-grid small,
  .product-nav-mobile .product-nav-feature-arrow {
    display: none;
  }
  .product-nav-mobile .product-nav-feature-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
  }
  .product-nav-mobile .product-nav-feature-icon svg {
    width: 18px;
    height: 18px;
  }
  .product-nav-mobile-entry {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    min-height: 52px;
    padding: 12px 8px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    text-align: left;
    font-size: var(--font-label);
    font-weight: 500;
    line-height: 1.5;
  }
  .product-nav-mobile-entry:is([data-current], [aria-current]) {
    color: var(--color-brand-green);
  }
  .product-nav-mobile-entry:is(:hover, [aria-expanded="true"]) {
    background: var(--color-surface-subtle);
  }
  .product-nav-mobile-entry[aria-expanded="true"] .product-caret {
    transform: rotate(180deg);
  }
  .product-nav-mobile-section {
    padding: 4px 0 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--color-border-subtle);
  }
  .product-nav-mobile .product-nav-resource-list > a {
    min-height: 48px;
    padding: 10px 12px;
  }
  .product-nav-mobile .product-nav-resource-list strong {
    font-size: var(--font-body-small);
    font-weight: 400;
  }
  .product-nav-mobile .product-nav-resource-list small {
    display: none;
  }
  .product-nav-mobile-inner > .product-button {
    width: 100%;
    min-height: 44px;
    margin-top: 16px;
    padding: 12px 20px;
    font-size: var(--font-body-small);
  }
}
@media (max-width: 389.98px) {
  .product-nav-mobile-inner {
    padding-inline: max(16px, env(safe-area-inset-left))
      max(16px, env(safe-area-inset-right));
  }
}
@media (max-width: 809.98px) {
  .product-nav-mobile .product-nav-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(var(--product-nav-rows), minmax(48px, auto));
    grid-auto-flow: column;
    gap: 2px 8px;
  }
  .product-nav-mobile .product-nav-feature-grid > a {
    min-height: 48px;
  }
  .product-nav-mobile .product-nav-feature-grid strong {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .product-nav-mobile .product-nav-title-part {
    display: inline-block;
    max-width: 100%;
    vertical-align: top;
  }
  .product-section {
    padding: var(--space-section) var(--space-page-inline);
  }
  .product-heading {
    margin-bottom: var(--space-content-gap);
  }
  .product-heading h2,
  .product-panel-copy h2 {
    font-size: var(--font-heading-two);
  }
  .product-heading > p {
    font-size: var(--font-lead);
    margin-top: var(--space-heading-gap);
  }
  .product-feature-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .product-feature-card {
    min-height: 340px;
    padding: 20px 20px 0;
  }
  .product-feature-card h3 {
    font-size: var(--font-heading-three);
    margin-bottom: 12px;
  }
  .product-feature-card > p {
    font-size: var(--font-body);
    line-height: 1.7;
  }
  .product-feature-bottom {
    min-height: 156px;
  }
  .product-card-character {
    width: 160px;
    height: 160px;
    right: -10px;
  }
  .product-feature-symbol {
    margin-bottom: 16px;
  }
  .product-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 28px;
  }
  /* Reserve breathing room below the shared header without changing sticky flow. */
  #platform-workspace .product-tabs {
    position: sticky;
    top: var(--site-header-height);
    padding-top: 12px;
    z-index: 2;
    background: var(--color-surface-subtle);
  }
  .product-tabs button {
    flex-direction: row;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 12px 8px;
    font-size: var(--font-label);
  }
  .product-tabs svg {
    width: 20px;
    height: 20px;
  }
  .product-feature-panel {
    grid-template-columns: 1fr;
    gap: var(--space-content-gap);
  }
  .product-panel-copy h3 {
    font-size: var(--font-heading-three);
  }
  .product-panel-copy > p {
    font-size: var(--font-body-large);
    line-height: 1.7;
  }
  .product-panel-copy ul {
    font-size: var(--font-body);
    gap: 12px;
    margin: 20px 0 24px;
  }
  .product-demo-stage {
    padding: 18px;
  }
  .product-nav-inner {
    padding: 10px var(--space-page-inline);
  }
  .product-nav .logo.logo__default-layout {
    min-height: 44px;
    gap: 8px;
  }
  .product-nav .logo .logo__mark {
    width: 18px;
    height: 28px;
  }
  .product-nav .logo .logo__wordmark {
    --font-heading-four: 20px;
  }
  .product-nav .logo .logo__wordmark .logo__chinese-name {
    font-size: 16px;
  }
  .product-brand {
    font-size: 25px;
  }
  .product-page-hero {
    padding: 40px var(--space-page-inline) 0;
  }
  .product-page h1,
  .product-detail-hero h1 {
    font-size: var(--font-heading-one);
  }
  .product-page-hero > p {
    font-size: var(--font-lead);
  }
  .product-detail-hero {
    padding: 40px var(--space-page-inline) var(--space-section);
    grid-template-columns: 1fr;
    gap: var(--space-content-gap);
  }
  .product-detail-hero p {
    font-size: var(--font-lead);
  }
  .product-detail-character {
    width: 240px;
    justify-self: center;
  }
  .product-actions {
    gap: 10px;
  }
  .product-button {
    padding: var(--button-padding-block) var(--button-padding-inline);
    font-size: var(--font-label);
  }
  .product-steps,
  .product-steps li {
    padding: 24px;
  }
  .product-steps li > span {
    margin-bottom: 20px;
  }
  .product-faq details {
    padding: 20px;
  }
  .product-feature-panel .product-panel-copy .product-button {
    max-width: 100%;
    gap: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .product-feature-card,
  .product-button,
  .product-nav-dropdown {
    animation: none;
    transition: none;
  }
  .product-feature-card:hover,
  .product-button:hover {
    transform: none;
  }
}

.home-page h1 .product-hero-title-line {
  display: block;
  white-space: nowrap;
}
.product-feature-panel:not([hidden]) {
  animation: product-panel-in 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes product-panel-in {
  from {
    opacity: 0;
    translate: 0 8px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@media (min-width: 810px) and (max-width: 1199.98px) {
  .product-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (prefers-reduced-motion: reduce) {
  .product-feature-panel:not([hidden]) {
    animation: none;
  }
}

/* Interaction polish, without changing the existing transform choreography. */
.product-nav-desktop > a,
.product-nav-group > button,
.product-nav-feature-grid > a,
.product-nav-resource-list > a,
.product-nav-mobile-entry,
.product-text-link {
  transition:
    background-color var(--duration-ui),
    color var(--duration-ui),
    box-shadow var(--duration-ui);
}
.product-text-link {
  min-height: 44px;
  align-items: center;
}
.product-nav-cta {
  min-height: var(--control-target-primary);
  padding: 12px 28px;
}
.product-panel-copy h3 {
  font-size: var(--font-heading-three);
}
@media (prefers-reduced-motion: reduce) {
  .product-nav-desktop > a,
  .product-nav-group > button,
  .product-nav-feature-grid > a,
  .product-nav-resource-list > a,
  .product-nav-mobile-entry,
  .product-nav-feature-arrow,
  .product-caret,
  .product-text-link {
    transition: none;
  }
  .product-button {
    transition: none;
  }
  .product-nav-dropdown {
    animation: none;
  }
}

/* Feature illustrations use the existing palette, at native text resolution. */
#platform-workspace .product-demo-stage {
  container-type: inline-size;
  container-name: feature-illustration;
  padding: 24px;
  background-image: radial-gradient(
    ellipse at top left,
    rgba(255, 255, 255, 0.64),
    transparent 72%
  );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.feature-illustration {
  min-width: 0;
  width: 100%;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.5;
}
.feature-illustration :is(p, h4) {
  margin: 0;
}
.feature-illustration strong {
  font-weight: 600;
}
@media (max-width: 809px) {
  #platform-workspace .product-demo-stage {
    padding: 14px;
  }
}

/* A storefront with a floating shopping assistant. Products stay vector-sharp. */
.commerce-illustration {
  width: 100%;
  min-width: 0;
  color: var(--color-text-primary);
  font-size: 13px;
  line-height: 1.55;
}
.commerce-illustration__scene {
  position: relative;
  min-height: 578px;
  isolation: isolate;
}
.commerce-illustration__store {
  overflow: hidden;
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-panel, 18px);
  background: var(--color-surface-white);
  box-shadow: var(--feature-ui-panel-shadow, var(--shadow-card));
}
.commerce-illustration__store-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--feature-ui-space-4, 16px);
  min-height: 60px;
  padding: var(--feature-ui-space-3, 13px) var(--feature-ui-space-4, 18px);
  background: var(--color-surface-inverse);
  color: var(--color-surface-white);
}
.commerce-illustration__store-nav > strong {
  font-size: 15px;
  letter-spacing: 0.05em;
  line-height: 1.15;
}
.commerce-illustration__store-nav > strong > span {
  display: block;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.3em;
  margin-top: 4px;
  opacity: 0.7;
}
.commerce-illustration__store-links {
  display: flex;
  gap: var(--feature-ui-space-4, 18px);
  font-size: 12px;
  color: var(--color-border-subtle);
}
.commerce-illustration__store-links b {
  font-weight: 500;
  color: var(--color-surface-white);
  border-bottom: 2px solid var(--color-accent-lime);
  padding-bottom: 3px;
}
.commerce-illustration__nav-icons {
  display: flex;
  gap: var(--feature-ui-space-3, 14px);
}
.commerce-illustration__collection {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--feature-ui-space-2, 8px);
  padding: var(--feature-ui-space-5, 22px) var(--feature-ui-space-4, 18px)
    var(--feature-ui-space-4, 16px);
}
.commerce-illustration__collection > div > span {
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--color-text-muted);
  display: block;
  margin-bottom: 5px;
}
.commerce-illustration__collection strong {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.commerce-illustration__shop-label {
  padding: var(--feature-ui-space-1, 4px) var(--feature-ui-space-2, 8px);
  font-size: 11px;
  border-radius: var(--feature-ui-radius-card, 6px);
  background: var(--color-accent-lime-soft);
  white-space: nowrap;
}
.commerce-illustration__products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--feature-ui-space-2, 10px);
  padding: 0 var(--feature-ui-space-4, 16px) var(--feature-ui-space-4, 16px);
}
.commerce-illustration__product {
  min-width: 0;
}
.commerce-illustration__product-image {
  height: 180px;
  overflow: hidden;
  background: linear-gradient(
    145deg,
    var(--color-surface-subtle),
    var(--color-surface-white)
  );
  border-radius: var(--feature-ui-radius-card, 10px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.commerce-illustration__product-image--peach {
  background: linear-gradient(
    155deg,
    var(--color-accent-peach-soft),
    var(--color-surface-white)
  );
}
.commerce-illustration__product-image--lime {
  background: linear-gradient(
    155deg,
    var(--color-accent-lime-soft),
    var(--color-surface-white)
  );
}
.commerce-illustration__tumbler {
  width: 100%;
  max-width: 140px;
  height: 180px;
  display: block;
  --cup-main: var(--color-accent-mint);
  --cup-light: var(--color-accent-mint-soft);
  --cup-dark: color-mix(
    in srgb,
    var(--color-accent-mint) 60%,
    var(--color-text-secondary)
  );
}
.commerce-illustration__tumbler--peach {
  --cup-main: var(--color-accent-peach);
  --cup-light: var(--color-accent-peach-soft);
  --cup-dark: color-mix(
    in srgb,
    var(--color-accent-peach) 70%,
    var(--color-text-secondary)
  );
}
.commerce-illustration__tumbler--lime {
  --cup-main: var(--color-accent-lime);
  --cup-light: var(--color-accent-lime-soft);
  --cup-dark: color-mix(
    in srgb,
    var(--color-accent-lime) 60%,
    var(--color-text-secondary)
  );
}
.commerce-illustration__product > strong {
  display: block;
  font-size: 12px;
  font-weight: 600;
}
.commerce-illustration__product > span {
  display: block;
  font-size: 10px;
  color: var(--color-text-muted);
  margin-top: 3px;
}
.commerce-illustration__product > b {
  display: block;
  font-size: 13px;
  margin: 7px 0;
  font-weight: 600;
}
.commerce-illustration__add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--feature-ui-space-1, 5px);
  border-radius: var(--feature-ui-radius-card, 7px);
  padding: var(--feature-ui-space-2, 7px) 3px;
  background: var(--color-surface-inverse);
  color: var(--color-surface-white);
  font-size: 10px;
}
.commerce-illustration__store-note {
  padding: var(--feature-ui-space-3, 13px) var(--feature-ui-space-4, 16px);
  font-size: 10px;
  border-top: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
  color: var(--color-text-muted);
}
.commerce-illustration__chat {
  position: absolute;
  top: 155px;
  right: 0;
  width: 56%;
  min-width: 250px;
  overflow: hidden;
  border: 1px solid
    color-mix(in srgb, var(--color-border-subtle) 70%, transparent);
  border-radius: var(--feature-ui-radius-panel, 19px);
  background: var(--color-surface-white);
  box-shadow: var(
    --feature-ui-panel-shadow,
    0 14px 44px color-mix(in srgb, var(--color-text-primary) 13%, transparent),
    0 2px 6px color-mix(in srgb, var(--color-text-primary) 5%, transparent)
  );
}
.commerce-illustration__chat::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(
    100deg,
    var(--color-accent-lime),
    var(--color-accent-mint)
  );
}
.commerce-illustration__chat-head {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 9px);
  padding: var(--feature-ui-space-4, 17px) var(--feature-ui-space-4, 15px)
    var(--feature-ui-space-3, 14px);
  border-bottom: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
  background: linear-gradient(
    140deg,
    var(--color-surface-white) 30%,
    color-mix(
      in srgb,
      var(--color-accent-mint-soft) 38%,
      var(--color-surface-white)
    )
  );
}
.commerce-illustration__assistant-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 32px;
  height: 34px;
  border-radius: var(--feature-ui-radius-card, 11px)
    var(--feature-ui-radius-card, 11px) var(--feature-ui-radius-card, 11px)
    var(--feature-ui-radius-tail, 3px);
  flex-shrink: 0;
  background: linear-gradient(
    150deg,
    var(--color-accent-lime),
    var(--color-accent-mint)
  );
}
.commerce-illustration__assistant-mark i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--color-text-primary);
}
.commerce-illustration__chat-head > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.commerce-illustration__chat-head strong {
  font-size: 14px;
  font-weight: 600;
}
.commerce-illustration__chat-head > div > span {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 4px);
  font-size: 11px;
  color: var(--color-text-muted);
}
.commerce-illustration__chat-head > div > span i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-status-success);
}
.commerce-illustration__more {
  margin-left: auto;
  letter-spacing: 2px;
}
.commerce-illustration__conversation {
  padding: var(--feature-ui-space-4, 15px);
  display: flex;
  flex-direction: column;
  gap: var(--feature-ui-space-3, 12px);
}
.commerce-illustration__welcome {
  font-size: 12px;
  color: var(--color-text-muted);
}
.commerce-illustration__customer {
  align-self: flex-end;
  max-width: 95%;
  background: var(--color-surface-inverse);
  color: var(--color-surface-white);
  padding: var(--feature-ui-space-2, 10px) var(--feature-ui-space-3, 12px);
  border-radius: var(--feature-ui-radius-card, 12px)
    var(--feature-ui-radius-card, 12px) var(--feature-ui-radius-tail, 3px)
    var(--feature-ui-radius-card, 12px);
  font-size: 12px;
}
.commerce-illustration__reply {
  display: flex;
  align-items: flex-start;
  gap: var(--feature-ui-space-2, 7px);
  font-size: 12px;
}
.commerce-illustration__reply > svg {
  flex-shrink: 0;
  margin-top: 3px;
}
.commerce-illustration__recommendation {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: var(--feature-ui-space-2, 10px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 11px);
  padding: var(--feature-ui-space-2, 8px);
  background: var(--color-surface-white);
}
.commerce-illustration__recommendation > div {
  border-radius: var(--feature-ui-radius-card, 7px);
  background: linear-gradient(
    150deg,
    var(--color-accent-mint-soft),
    var(--color-surface-white)
  );
  height: 76px;
  overflow: hidden;
}
.commerce-illustration__recommendation .commerce-illustration__tumbler {
  width: 62px;
  height: 78px;
}
.commerce-illustration__recommendation section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-width: 0;
}
.commerce-illustration__recommendation strong {
  font-size: 12px;
  font-weight: 600;
}
.commerce-illustration__recommendation section > span {
  font-size: 11px;
  color: var(--color-text-muted);
}
.commerce-illustration__recommendation b {
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.commerce-illustration__recommendation b svg {
  background: var(--color-accent-lime-soft);
  border-radius: 50%;
  box-sizing: content-box;
  padding: var(--feature-ui-space-1, 4px);
}
.commerce-illustration__quick-reply {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 7px);
  font-size: 12px;
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  padding: var(--feature-ui-space-2, 8px) var(--feature-ui-space-2, 10px);
  border-radius: var(--feature-ui-radius-card, 8px);
}
.commerce-illustration__quick-reply > svg:last-child {
  margin-left: auto;
}
.commerce-illustration__composer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
  padding: var(--feature-ui-space-2, 10px) var(--feature-ui-space-3, 14px);
  font-size: 12px;
  color: var(--color-text-muted);
}
.commerce-illustration__composer > span:last-child {
  display: flex;
  padding: var(--feature-ui-space-2, 7px);
  border-radius: var(--feature-ui-radius-control, 8px);
  background: linear-gradient(
    145deg,
    var(--color-accent-lime),
    var(--color-accent-mint)
  );
  color: var(--color-text-primary);
}
.commerce-illustration__caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--feature-ui-space-1, 6px);
  margin-top: 12px;
  color: var(--color-text-muted);
  font-size: 12px;
}

/* Desktop HTML/SVG canvas, shared across screen sizes. */
.workflow-illustration {
  overflow: hidden;
  min-width: 0;
  color: var(--color-text-primary);
  background: var(--color-surface-white);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-panel, 18px);
  box-shadow: var(--feature-ui-panel-shadow, var(--shadow-card));
  font-size: 13px;
  line-height: 1.45;
}
.workflow-illustration svg {
  display: block;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}
.workflow-illustration-header {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--feature-ui-space-2, 10px);
  padding: var(--feature-ui-space-3, 12px) var(--feature-ui-space-4, 15px);
  border-bottom: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
}
.workflow-illustration-title,
.workflow-illustration-actions,
.workflow-illustration-test {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 7px);
}
.workflow-illustration-title {
  min-width: 0;
  flex-wrap: wrap;
}
.workflow-illustration-title > svg {
  color: var(--color-text-secondary);
}
.workflow-illustration-title strong {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.workflow-illustration-draft {
  padding: 3px var(--feature-ui-space-2, 7px);
  border-radius: var(--feature-ui-radius-badge, 6px);
  background: var(--color-surface-subtle);
  color: var(--color-text-muted);
  font-size: 12px;
  white-space: nowrap;
}
.workflow-illustration-actions {
  flex-shrink: 0;
}
.workflow-illustration-test,
.workflow-illustration-publish {
  border-radius: var(--feature-ui-radius-card, 7px);
  padding: var(--feature-ui-space-1, 6px) var(--feature-ui-space-2, 9px);
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}
.workflow-illustration-test {
  gap: var(--feature-ui-space-1, 4px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
}
.workflow-illustration-test svg {
  width: 12px;
  height: 12px;
}
.workflow-illustration-publish {
  border: 1px solid transparent;
  background: var(--color-accent-lime-soft);
  color: var(--color-text-primary);
}
.workflow-illustration-workspace {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 132px;
}
.workflow-illustration-tools {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--feature-ui-space-2, 9px);
  padding: var(--feature-ui-space-3, 14px) 3px;
  border-right: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
  background: var(--color-surface-white);
}
.workflow-illustration-tool {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 29px;
  height: 29px;
  border-radius: var(--feature-ui-radius-card, 7px);
  color: var(--color-text-secondary);
}
.workflow-illustration-tool--cursor {
  background: var(--color-surface-subtle);
}
.workflow-illustration-tool--active {
  background: var(--color-accent-sky-soft);
  color: var(--color-text-primary);
}
.workflow-illustration-tool-divider {
  width: 18px;
  height: 1px;
  background: var(--color-border-subtle);
}
.workflow-illustration-canvas {
  position: relative;
  min-width: 0;
  height: 440px;
  background-color: var(--color-surface-white);
  background-image: radial-gradient(
    var(--color-border-subtle) 0.7px,
    transparent 0.7px
  );
  background-size: 13px 13px;
}
.workflow-illustration .workflow-illustration-connections {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 440px;
  overflow: visible;
  fill: none;
  stroke: var(--color-text-muted);
  stroke-width: 1.2px;
  stroke-dasharray: 3 4;
  opacity: 0.6;
}
.workflow-illustration-connections path {
  vector-effect: non-scaling-stroke;
}
.workflow-illustration-node {
  position: absolute;
  left: 50%;
  width: 156px;
  height: 64px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 9px 10px;
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 10px);
  background: var(--color-surface-white);
  box-shadow: var(--feature-ui-card-shadow, 0 3px 8px rgba(14, 35, 23, 0.04));
}
.workflow-illustration-node-title {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.workflow-illustration-node-title svg {
  width: 16px;
  height: 16px;
}
.workflow-illustration-node-title strong {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.workflow-illustration-node-description {
  font-size: 12px;
  white-space: nowrap;
  color: var(--color-text-secondary);
}
.workflow-illustration-node--message {
  top: 24px;
  background: var(--color-accent-mint-soft);
}
.workflow-illustration-node--condition {
  top: 124px;
  background: var(--color-accent-sky-soft);
}
.workflow-illustration-node--llm,
.workflow-illustration-node--form {
  top: 238px;
  width: calc(50% - 20px);
  max-width: 140px;
}
.workflow-illustration-node--llm {
  left: 25%;
  background: var(--color-accent-lime-soft);
}
.workflow-illustration-node--form {
  left: 75%;
  min-width: 136px;
}
.workflow-illustration-node--selected {
  border-color: var(--color-text-secondary);
  box-shadow:
    0 0 0 3px var(--color-accent-sky-soft),
    0 3px 10px rgba(14, 35, 23, 0.04);
}
.workflow-illustration-node--human {
  top: 354px;
}
.workflow-illustration-port {
  position: absolute;
  left: 50%;
  width: 6px;
  height: 6px;
  transform: translateX(-50%);
  border: 1px solid var(--color-text-muted);
  border-radius: 50%;
  background: var(--color-surface-white);
}
.workflow-illustration-port--in {
  top: -4px;
}
.workflow-illustration-port--out {
  bottom: -4px;
}
.workflow-illustration-branch-label {
  position: absolute;
  top: 212px;
  padding: 0 var(--feature-ui-space-1, 4px);
  transform: translateX(-50%);
  background: var(--color-surface-white);
  color: var(--color-text-muted);
  font-size: 12px;
  white-space: nowrap;
}
.workflow-illustration-branch-label--left {
  left: 25%;
}
.workflow-illustration-branch-label--right {
  left: 75%;
}
.workflow-illustration-zoom {
  position: absolute;
  left: 12px;
  bottom: 10px;
  color: var(--color-text-muted);
  font-size: 12px;
}
.workflow-illustration-minimap {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 58px;
  height: 40px;
  padding: 2px;
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 5px);
  background: var(--glass-surface);
}
.workflow-illustration-minimap svg {
  width: 100%;
  height: 100%;
}
.workflow-illustration-minimap path {
  fill: none;
  stroke: var(--color-border-default);
  stroke-width: 1.4;
}
.workflow-illustration-minimap rect {
  fill: var(--color-accent-sky-soft);
  stroke: var(--color-border-default);
  stroke-width: 0.6;
}
.workflow-illustration-properties {
  min-width: 0;
  padding: var(--feature-ui-space-3, 14px) var(--feature-ui-space-2, 10px);
  border-left: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
  background: var(--color-surface-white);
}
.workflow-illustration-properties-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--feature-ui-space-1, 6px);
  margin-bottom: 22px;
  color: var(--color-text-muted);
  font-size: 12px;
}
.workflow-illustration-properties-heading svg {
  width: 15px;
  height: 15px;
}
.workflow-illustration-selected {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 7px);
  padding-bottom: 18px;
  border-bottom: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
}
.workflow-illustration-selected-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 30px;
  border-radius: var(--feature-ui-radius-icon, 7px);
  background: var(--color-accent-sky-soft);
}
.workflow-illustration-selected > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--feature-ui-space-1, 4px);
}
.workflow-illustration-selected strong {
  font-size: 13px;
  font-weight: 600;
}
.workflow-illustration-selected > div > span {
  font-size: 12px;
  color: var(--color-text-muted);
}
.workflow-illustration-fields {
  display: flex;
  flex-direction: column;
  gap: var(--feature-ui-space-2, 9px);
  margin-top: 18px;
}
.workflow-illustration-label {
  display: block;
  color: var(--color-text-muted);
  font-size: 12px;
}
.workflow-illustration-fields > div {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 6px);
  padding: var(--feature-ui-space-2, 8px) var(--feature-ui-space-1, 6px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-control, 6px);
  font-size: 13px;
  white-space: nowrap;
}
.workflow-illustration-fields > div > span {
  min-width: 19px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 12px;
}
.workflow-illustration-validation {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 4px);
  margin-top: 13px;
  font-size: 12px;
  color: var(--color-text-secondary);
}
.workflow-illustration-validation svg {
  width: 13px;
  height: 13px;
}
.workflow-illustration-next {
  display: flex;
  flex-direction: column;
  gap: var(--feature-ui-space-2, 9px);
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
}
.workflow-illustration-next strong {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 7px);
  font-size: 13px;
  font-weight: 500;
}
.workflow-illustration-next svg {
  width: 16px;
  height: 16px;
}
.workflow-illustration-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--feature-ui-space-2, 10px);
  padding: var(--feature-ui-space-3, 11px) var(--feature-ui-space-3, 13px);
  border-top: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
  color: var(--color-text-muted);
  font-size: 12px;
}
.workflow-illustration-save {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 4px);
}
.workflow-illustration-save svg {
  width: 13px;
  height: 13px;
}

.social-illustration.feature-illustration {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-panel, 20px);
  background: var(--color-surface-white);
  color: var(--color-text-primary);
  box-shadow: var(--feature-ui-panel-shadow, var(--shadow-card));
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
}
.social-illustration *,
.social-illustration *::before,
.social-illustration *::after {
  box-sizing: border-box;
}
.social-illustration strong {
  font-weight: 600;
}
.social-illustration svg,
.social-illustration .social-brand-icon {
  display: block;
  flex-shrink: 0;
}
.social-illustration p {
  margin: 0;
}
.social-illustration__topbar {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 10px);
  min-height: 70px;
  padding: var(--feature-ui-space-3, 14px) var(--feature-ui-space-4, 16px);
  border-bottom: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
}
.social-illustration__app-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-icon, 10px);
  background: var(--color-surface-subtle);
}
.social-illustration__app-mark svg {
  width: 20px;
  height: 20px;
}
.social-illustration__title {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.social-illustration__title strong {
  font-size: 15px;
}
.social-illustration__title > span {
  color: var(--color-text-muted);
  font-size: 12px;
}
.social-illustration__pending {
  display: inline-flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 5px);
  flex-shrink: 0;
  margin-left: auto;
  color: var(--color-text-secondary);
  font-size: 12px;
}
.social-illustration__pending b {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: var(--feature-ui-radius-card, 7px);
  background: var(--color-accent-butter-soft);
  color: var(--color-text-primary);
  font-weight: 600;
}
.social-illustration__workspace {
  display: grid;
  grid-template-columns: 42px 158px minmax(0, 1fr);
  min-width: 0;
}
.social-illustration__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--feature-ui-space-3, 12px);
  padding: var(--feature-ui-space-4, 16px) var(--feature-ui-space-1, 4px);
  border-right: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
  background: var(--color-page-background);
}
.social-illustration__channel {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: var(--feature-ui-radius-card, 10px);
  color: var(--color-text-secondary);
}
.social-illustration__channel--selected {
  background: var(--color-accent-mint-soft);
  color: var(--color-text-primary);
  box-shadow: inset 0 0 0 1px
    color-mix(in srgb, var(--color-accent-mint) 55%, transparent);
}
.social-illustration__channel i {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-status-success);
  box-shadow: 0 0 0 2px var(--color-page-background);
}
.social-illustration__conversations {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
  background: var(--color-surface-white);
}
.social-illustration__list-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--feature-ui-space-2, 8px);
  padding: var(--feature-ui-space-4, 15px) var(--feature-ui-space-3, 12px)
    var(--feature-ui-space-3, 13px);
  color: var(--color-text-secondary);
}
.social-illustration__list-heading strong {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 7px);
  font-size: 13px;
}
.social-illustration__list-heading strong span {
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 400;
}
.social-illustration__conversation {
  position: relative;
  min-width: 0;
  padding: var(--feature-ui-space-3, 13px) var(--feature-ui-space-3, 11px);
  border-top: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
}
.social-illustration__conversation--selected {
  background: color-mix(
    in srgb,
    var(--color-accent-mint-soft) 38%,
    var(--color-surface-white)
  );
}
.social-illustration__conversation--selected::before {
  position: absolute;
  inset: 12px auto 12px 0;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--color-accent-mint);
  content: "";
}
.social-illustration__conversation-person {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 7px);
  min-width: 0;
}
.social-illustration__conversation-person > div {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 5px);
  min-width: 0;
}
.social-illustration__conversation-person .social-illustration__source {
  flex-shrink: 0;
}
.social-illustration__conversation-person strong {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.social-illustration__avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border: 1px solid
    color-mix(in srgb, var(--color-text-primary) 7%, transparent);
  border-radius: 10px;
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.5px;
}
.social-illustration__avatar--peach {
  background: var(--color-accent-peach-soft);
}
.social-illustration__avatar--lavender {
  background: var(--color-accent-lavender-soft);
}
.social-illustration__avatar--mint {
  background: var(--color-accent-mint-soft);
}
.social-illustration__avatar--sky {
  background: var(--color-accent-sky-soft);
}
.social-illustration__source {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 4px);
  color: var(--color-text-muted);
  font-size: 12px;
  white-space: nowrap;
}
.social-illustration__source svg,
.social-illustration__source .social-brand-icon {
  width: 12px;
  height: 12px;
}
.social-illustration__conversation > p {
  overflow: hidden;
  margin-top: 9px;
  color: var(--color-text-secondary);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.social-illustration__conversation-state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--feature-ui-space-1, 4px);
  margin-top: 8px;
  color: var(--color-text-muted);
  font-size: 12px;
}
.social-illustration__conversation--selected
  .social-illustration__conversation-state
  > span:first-child {
  color: var(--color-text-secondary);
}
.social-illustration__conversation-state > span:last-child {
  white-space: nowrap;
}
.social-illustration__list-foot {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 6px);
  margin-top: auto;
  padding: var(--feature-ui-space-4, 16px) var(--feature-ui-space-3, 11px);
  color: var(--color-text-muted);
  font-size: 12px;
}
.social-illustration__live-dot {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: var(--color-status-success);
}
.social-illustration__chat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--color-surface-white);
}
.social-illustration__chat-heading {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 8px);
  padding: var(--feature-ui-space-3, 13px) var(--feature-ui-space-3, 14px);
  border-bottom: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
}
.social-illustration__chat-heading > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.social-illustration__chat-menu {
  align-self: flex-start;
  margin-left: auto;
  color: var(--color-text-muted);
  font-size: 18px;
  line-height: 1;
}
.social-illustration__messages {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--feature-ui-space-2, 10px);
  min-width: 0;
  padding: var(--feature-ui-space-3, 12px) var(--feature-ui-space-3, 14px)
    var(--feature-ui-space-3, 14px);
  background: var(--color-page-background);
}
.social-illustration__date {
  align-self: center;
  margin-bottom: 1px;
  color: var(--color-text-muted);
  font-size: 12px;
}
.social-illustration__message {
  max-width: 100%;
  padding: var(--feature-ui-space-2, 10px) var(--feature-ui-space-3, 11px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 12px);
  color: var(--color-text-secondary);
  font-size: 13px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.social-illustration__message--customer {
  align-self: flex-start;
  margin-right: 12px;
  border-bottom-left-radius: 4px;
  background: var(--color-surface-white);
}
.social-illustration__message--agent,
.social-illustration__message--human {
  align-self: flex-end;
  margin-left: 12px;
  border-color: color-mix(
    in srgb,
    var(--color-accent-mint) 35%,
    var(--color-border-subtle)
  );
  border-bottom-right-radius: 4px;
  background: color-mix(
    in srgb,
    var(--color-accent-mint-soft) 50%,
    var(--color-surface-white)
  );
}
.social-illustration__sender {
  display: flex;
  align-items: center;
  align-self: flex-end;
  gap: var(--feature-ui-space-1, 6px);
  margin-bottom: -4px;
  font-size: 12px;
  font-weight: 600;
}
.social-illustration__sender > span:last-child {
  color: var(--color-text-muted);
  font-weight: 400;
}
.social-illustration__ai-mark {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: var(--feature-ui-radius-icon, 7px);
  background: linear-gradient(
    140deg,
    var(--color-accent-lime),
    var(--color-accent-mint)
  );
}
.social-illustration__ai-mark svg {
  width: 13px;
  height: 13px;
}
.social-illustration__context {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 5px);
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid
    color-mix(in srgb, var(--color-border-default) 70%, transparent);
  color: var(--color-text-muted);
  font-size: 12px;
}
.social-illustration__context svg,
.social-illustration__delivery svg {
  width: 12px;
  height: 12px;
}
.social-illustration__handoff {
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: var(--feature-ui-space-2, 7px);
  padding: var(--feature-ui-space-2, 9px) 0;
  border-block: 1px dashed var(--color-border-default);
}
.social-illustration__team-avatar {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  border: 2px solid var(--color-surface-white);
  border-radius: 50%;
  background: var(--color-accent-lavender-soft);
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 0 0 1px var(--color-border-subtle);
}
.social-illustration__handoff > div {
  display: grid;
  gap: 2px;
  min-width: 0;
  font-size: 12px;
}
.social-illustration__handoff > div > span {
  color: var(--color-text-muted);
}
.social-illustration__handoff > svg {
  width: 13px;
  height: 13px;
  margin-left: auto;
  color: var(--color-text-muted);
}
.social-illustration__delivery {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--feature-ui-space-1, 4px);
  margin-top: 5px;
  color: var(--color-text-muted);
  font-size: 12px;
}
.social-illustration__composer {
  padding: var(--feature-ui-space-3, 11px) var(--feature-ui-space-3, 14px)
    var(--feature-ui-space-3, 12px);
  border-top: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
}
.social-illustration__composer-label {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 4px);
  color: var(--color-text-muted);
  font-size: 12px;
}
.social-illustration__composer-label svg {
  width: 12px;
  height: 12px;
}
.social-illustration__composer-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--feature-ui-space-2, 8px);
  margin-top: 6px;
  color: var(--color-text-muted);
}
.social-illustration__composer-tools {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 10px);
}
.social-illustration__send-mark {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--feature-ui-radius-icon, 8px);
  background: var(--color-surface-inverse);
  color: var(--color-surface-white);
}
.social-illustration__send-mark svg {
  width: 14px;
  height: 14px;
}
.social-illustration__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--feature-ui-space-2, 7px);
  padding: var(--feature-ui-foot-padding, 10px 12px);
  border-top: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
  color: var(--color-text-muted);
  font-size: 12px;
  text-wrap: wrap;
}

/* Model and language product illustrations: original HTML remains crisp at every width. */
.model-illustration,
.language-illustration {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-panel, 18px);
  background: var(--color-surface-white);
  color: var(--color-text-primary);
  box-shadow: var(
    --feature-ui-panel-shadow,
    var(--shadow-card),
    inset 0 1px 0 var(--color-surface-white)
  );
  font-size: 13px;
  line-height: 1.55;
}
.model-illustration svg,
.language-illustration svg {
  flex-shrink: 0;
}
.model-illustration strong,
.language-illustration strong {
  font-weight: 600;
}
.model-illustration__chrome,
.language-illustration__chrome {
  min-height: 60px;
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 10px);
  padding: var(--feature-ui-chrome-padding, 14px 18px);
  border-bottom: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
}
.model-illustration__chrome > strong {
  font-size: 14px;
}
.model-illustration__app-mark,
.language-illustration__globe {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: var(--feature-ui-radius-icon, 10px);
  background: linear-gradient(
    135deg,
    var(--color-accent-lime-soft),
    var(--color-accent-mint-soft)
  );
}
.model-illustration__saved {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 4px);
  color: var(--color-text-muted);
  font-size: 12px;
  white-space: nowrap;
}
.model-illustration__saved svg {
  width: 14px;
  height: 14px;
}
.model-illustration__body {
  padding: var(--feature-ui-space-4, 18px);
}
.model-illustration__section-label {
  display: flex;
  justify-content: space-between;
  gap: var(--feature-ui-space-2, 8px);
  margin-bottom: 10px;
  color: var(--color-text-secondary);
}
.model-illustration__section-label > span:last-child {
  color: var(--color-text-muted);
  font-size: 12px;
}
.model-illustration__providers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--feature-ui-space-2, 7px);
  margin-bottom: 18px;
}
.model-illustration__provider {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--feature-ui-space-1, 5px);
  padding: var(--feature-ui-space-3, 12px) 3px var(--feature-ui-space-2, 9px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 11px);
  background: var(--color-surface-white);
  font-size: 12px;
}
.model-provider-logo {
  display: block;
  width: auto;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}
.model-illustration__provider-icon {
  display: grid;
  place-items: center;
  height: 25px;
}
.model-illustration__configuration {
  padding: var(--feature-ui-space-3, 14px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 13px);
  background: color-mix(
    in srgb,
    var(--color-surface-subtle) 45%,
    var(--color-surface-white)
  );
}
.model-illustration__config-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--feature-ui-space-2, 8px);
  margin-bottom: 13px;
}
.model-illustration__config-title > span:first-child {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 7px);
}
.model-illustration__config-title > span:last-child {
  color: var(--color-text-muted);
  font-size: 12px;
}
.model-illustration__field {
  min-width: 0;
}
.model-illustration__field > span {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  color: var(--color-text-muted);
}
.model-illustration__field > div {
  min-height: 35px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--feature-ui-space-2, 8px);
  padding: var(--feature-ui-space-2, 7px) var(--feature-ui-space-2, 9px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-control, 7px);
  background: var(--color-surface-white);
}
.model-illustration__field code {
  font: inherit;
  font-size: 12px;
  overflow-wrap: anywhere;
}
.model-illustration__field svg {
  width: 13px;
  height: 13px;
  color: var(--color-text-muted);
}
.model-illustration__field-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--feature-ui-space-2, 10px);
  margin-top: 10px;
}
.model-illustration__key {
  font-size: 12px;
  letter-spacing: 1px;
}
.model-illustration__field-note {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 5px);
  margin-top: 10px !important;
  font-size: 12px;
  color: var(--color-text-muted);
}
.model-illustration__field-note svg {
  width: 13px;
  height: 13px;
}
.model-illustration__test {
  padding-top: 16px;
}
.model-illustration__test-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--feature-ui-space-2, 8px);
  font-size: 12px;
}
.model-illustration__test-heading > span {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 5px);
}
.model-illustration__test-heading > span:last-child {
  color: var(--color-text-muted);
}
.model-illustration__test-heading svg {
  width: 13px;
  height: 13px;
}
.model-illustration__test > p {
  margin: 10px 0 8px !important;
  color: var(--color-text-secondary);
}
.model-illustration__test-answer {
  display: flex;
  align-items: flex-start;
  gap: var(--feature-ui-space-2, 9px);
}
.model-illustration__test-answer > span {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  flex-shrink: 0;
  border-radius: var(--feature-ui-radius-card, 8px);
  background: linear-gradient(
    135deg,
    var(--color-accent-lime),
    var(--color-accent-mint)
  );
}
.model-illustration__test-answer > p {
  padding: var(--feature-ui-space-2, 8px) var(--feature-ui-space-2, 10px);
  border-radius: 0 10px 10px;
  background: var(--color-surface-subtle);
}
.model-illustration__foot,
.language-illustration__foot {
  padding: var(--feature-ui-foot-padding, 12px 18px);
  border-top: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
  color: var(--color-text-muted);
  font-size: 12px;
}

.language-illustration__chrome {
  position: relative;
}
.language-illustration__globe {
  border-radius: 50%;
}
.language-illustration__globe svg {
  width: 23px;
  height: 23px;
}
.language-illustration__chrome > div {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.language-illustration__chrome strong {
  font-size: 14px;
}
.language-illustration__chrome > div > span {
  font-size: 12px;
  color: var(--color-text-muted);
}
.language-illustration__live {
  margin-left: auto;
  color: var(--color-text-secondary);
  font-size: 12px;
  white-space: nowrap;
}
.language-illustration__live::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--color-status-success);
}
.language-illustration__languages {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--feature-ui-space-1, 5px);
  padding: var(--feature-ui-space-4, 16px) var(--feature-ui-space-4, 18px) 0;
}
.language-illustration__languages > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--feature-ui-space-1, 4px);
  padding: var(--feature-ui-space-1, 5px) var(--feature-ui-space-1, 6px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 100px);
  font-size: 12px;
  white-space: nowrap;
  color: var(--color-text-secondary);
}
.language-illustration__flag {
  display: block;
  width: 16px;
  height: 12px;
  flex-shrink: 0;
  border-radius: var(--feature-ui-radius-card, 2px);
  box-shadow: 0 0 0 1px var(--color-border-subtle);
  object-fit: contain;
}
.language-illustration__languages > .language-illustration__language--selected {
  background: var(--color-surface-inverse);
  border-color: var(--color-surface-inverse);
  color: var(--color-surface-white);
}
.language-illustration__workspace {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
  gap: var(--feature-ui-space-4, 16px);
  padding: var(--feature-ui-space-5, 20px) var(--feature-ui-space-4, 18px)
    var(--feature-ui-space-4, 18px);
}
.language-illustration__knowledge {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--feature-ui-space-3, 14px) var(--feature-ui-space-3, 12px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 12px);
  background: linear-gradient(
    155deg,
    var(--color-surface-white) 40%,
    var(--color-accent-peach-soft)
  );
  box-shadow: var(
    --feature-ui-card-shadow,
    0 6px 14px color-mix(in srgb, var(--color-text-primary) 4%, transparent)
  );
}
.language-illustration__source-label {
  font-size: 12px;
  color: var(--color-text-muted);
}
.language-illustration__document-icon {
  display: grid;
  place-items: center;
  height: 44px;
  width: 37px;
  margin-block: 17px 11px;
  border-radius: var(--feature-ui-radius-icon, 8px);
  background: var(--color-surface-white);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
}
.language-illustration__document-icon svg {
  width: 25px;
  height: 25px;
}
.language-illustration__knowledge > strong {
  font-size: 13px;
  overflow-wrap: anywhere;
}
.language-illustration__document-subtitle {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 4px;
}
.language-illustration__document-lines {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--feature-ui-space-1, 5px);
  margin-block: 15px;
}
.language-illustration__document-lines i {
  display: block;
  width: 100%;
  height: 3px;
  border-radius: var(--feature-ui-radius-card, 2px);
  background: var(--color-border-subtle);
}
.language-illustration__document-lines i:nth-child(2) {
  width: 84%;
}
.language-illustration__document-lines i:nth-child(3) {
  width: 61%;
}
.language-illustration__excerpt {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--feature-ui-space-1, 5px);
  padding-top: 12px;
  border-top: 1px solid
    var(--feature-ui-divider-color, var(--color-border-default));
  font-size: 12px;
}
.language-illustration__excerpt b {
  font-weight: 600;
}
.language-illustration__source-ready {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 5px);
  margin-top: 16px;
  font-size: 12px;
  color: var(--color-text-muted);
}
.language-illustration__source-ready svg {
  width: 13px;
  height: 13px;
}
.language-illustration__conversation {
  min-width: 0;
}
.language-illustration__customer {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 8px);
  margin-bottom: 13px;
}
.language-illustration__avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: 50%;
  background: var(--color-accent-peach-soft);
}
.language-illustration__customer > div {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.language-illustration__customer > div > span {
  font-size: 12px;
  color: var(--color-text-muted);
}
.language-illustration__customer > svg {
  margin-left: auto;
  color: var(--color-text-muted);
  width: 16px;
  height: 16px;
}
.language-illustration__question {
  padding: var(--feature-ui-space-3, 12px) var(--feature-ui-space-3, 13px);
  background: var(--color-surface-inverse);
  color: var(--color-surface-white);
  border-radius: var(--feature-ui-radius-card, 13px)
    var(--feature-ui-radius-card, 13px) var(--feature-ui-radius-tail, 3px)
    var(--feature-ui-radius-card, 13px);
  line-height: 1.6;
}
.language-illustration__answer {
  margin-top: 15px;
  padding: var(--feature-ui-space-3, 13px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-tail, 3px)
    var(--feature-ui-radius-card, 13px) var(--feature-ui-radius-card, 13px);
  background: var(--color-surface-white);
  box-shadow: var(
    --feature-ui-card-shadow,
    0 5px 14px color-mix(in srgb, var(--color-text-primary) 3%, transparent)
  );
}
.language-illustration__agent {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 6px);
  margin-bottom: 9px;
}
.language-illustration__agent > span {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border-radius: var(--feature-ui-radius-card, 7px);
  background: linear-gradient(
    135deg,
    var(--color-accent-lime),
    var(--color-accent-mint)
  );
}
.language-illustration__agent svg {
  width: 14px;
  height: 14px;
}
.language-illustration__agent small {
  margin-left: auto;
  font-size: 12px;
  color: var(--color-text-muted);
}
.language-illustration__answer > p {
  line-height: 1.6;
}
.language-illustration__citation {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 6px);
  padding-top: 10px;
  margin-top: 12px;
  border-top: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
  font-size: 12px;
  color: var(--color-text-muted);
}
.language-illustration__citation svg {
  width: 14px;
  height: 14px;
}
.language-illustration__composer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--feature-ui-space-2, 8px);
  padding: var(--feature-ui-space-2, 10px) 0 0;
  margin-top: 5px;
  color: var(--color-text-muted);
  font-size: 12px;
}
.language-illustration__composer > span:last-child {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: var(--feature-ui-radius-control, 7px);
  background: var(--color-surface-subtle);
  color: var(--color-text-primary);
}
.language-illustration__composer svg {
  width: 14px;
  height: 14px;
}
.language-illustration__route {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--feature-ui-space-2, 9px);
  padding: var(--feature-ui-space-3, 12px) var(--feature-ui-space-2, 10px);
  margin: 0 18px 18px;
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 10px);
  background: var(--color-surface-subtle);
  font-size: 12px;
  color: var(--color-text-secondary);
}
.language-illustration__route svg {
  width: 13px;
  height: 13px;
}
.language-illustration__route strong {
  color: var(--color-text-primary);
}

/* Uniform desktop illustration frames; narrow containers scale the complete artwork. */
/* Match the approved multilingual panel: 586px content plus the existing inset. */
#platform-workspace {
  --feature-illustration-height: 586px;
}
#platform-workspace .feature-illustration {
  height: var(--feature-illustration-height);
}
.commerce-illustration {
  display: flex;
  flex-direction: column;
}
.commerce-illustration__scene {
  flex: 1;
  min-height: 0;
}
.commerce-illustration__caption {
  flex-shrink: 0;
}
.commerce-illustration__chat {
  top: 125px;
}

/* Fit the model and language workspaces into the shared 586px desktop frame. */
.model-illustration,
.language-illustration {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.model-illustration__chrome,
.language-illustration__chrome,
.model-illustration__foot,
.language-illustration__foot {
  flex-shrink: 0;
}
.model-illustration__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--feature-ui-space-3, 12px);
  padding: var(--feature-ui-space-4, 16px);
}
.model-illustration__providers {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--feature-ui-space-1, 6px);
  margin-bottom: 0;
}
.model-illustration__provider {
  flex-direction: column;
  justify-content: center;
  padding: var(--feature-ui-space-1, 6px) 2px;
  gap: var(--feature-ui-space-1, 4px);
  font-size: 12px;
}
.model-illustration__provider-icon {
  width: 40px;
  height: 24px;
}
.model-illustration__configuration {
  padding: var(--feature-ui-space-3, 12px);
}
.model-illustration__config-title {
  margin-bottom: 10px;
}
.model-illustration__field > span {
  margin-bottom: 4px;
}
.model-illustration__field > div {
  min-height: 32px;
  padding: var(--feature-ui-space-1, 6px) var(--feature-ui-space-2, 8px);
}
.model-illustration__field-pair {
  grid-template-columns: 1fr 1fr;
  gap: var(--feature-ui-space-2, 8px);
  margin-top: 9px;
}
.model-illustration__test {
  padding-top: 0;
}
.model-illustration__test > p {
  margin-block: 7px !important;
}
.model-illustration__test-answer > p {
  padding: var(--feature-ui-space-2, 7px) var(--feature-ui-space-2, 10px);
}
.model-illustration__foot,
.language-illustration__foot {
  margin-top: auto;
}
.language-illustration__languages {
  flex-shrink: 0;
}
.language-illustration__workspace {
  flex: 1;
  align-content: normal;
  align-items: normal;
}
.language-illustration__customer {
  margin-bottom: 13px;
}
.language-illustration__question {
  padding: var(--feature-ui-space-3, 12px) var(--feature-ui-space-3, 13px);
}
.language-illustration__answer {
  margin-top: 15px;
  padding: var(--feature-ui-space-3, 13px);
}
.language-illustration__agent {
  margin-bottom: 9px;
}
.language-illustration__citation {
  margin-top: 12px;
  padding-top: 10px;
}
.language-illustration__composer {
  margin-top: 5px;
  padding-top: 10px;
}
.language-illustration__route {
  flex-shrink: 0;
}

/* The desktop artwork uses the shared 586px frame. */
.workflow-illustration.feature-illustration {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: visible;
}
.workflow-illustration-header,
.workflow-illustration-footer {
  flex-shrink: 0;
}
.workflow-illustration-workspace {
  flex: 1;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr);
}
.workflow-illustration-canvas {
  display: flex;
  align-items: center;
  height: auto;
  min-height: 0;
}
.workflow-illustration-graph {
  position: relative;
  width: 100%;
  height: 440px;
  flex-shrink: 0;
}

/* The stage supplies a 586px inner height; content reflows without clipping. */
.social-illustration.feature-illustration {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: visible;
}
.social-illustration__topbar {
  flex-shrink: 0;
  min-height: 64px;
  padding-block: var(--feature-ui-space-3, 11px);
}
.social-illustration__workspace {
  flex: 1;
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
}
.social-illustration__conversations,
.social-illustration__chat,
.social-illustration__messages {
  min-height: 0;
}
.social-illustration__list-heading {
  padding-block: var(--feature-ui-space-3, 12px);
}
.social-illustration__conversation {
  padding-block: var(--feature-ui-space-2, 8px);
}
.social-illustration__conversation > p {
  margin-top: 6px;
}
.social-illustration__conversation-state {
  margin-top: 6px;
}
.social-illustration__list-foot {
  padding-block: var(--feature-ui-space-2, 8px);
}
.social-illustration__messages {
  justify-content: center;
  gap: var(--feature-ui-space-2, 9px);
  padding-block: var(--feature-ui-space-3, 12px);
}
.social-illustration__chat-heading,
.social-illustration__composer,
.social-illustration__footer {
  flex-shrink: 0;
}
.social-illustration__footer {
  min-height: 32px;
  padding-block: var(--feature-ui-space-1, 6px);
}
/* The integration map uses the shared desktop illustration frame. */
.integrations-illustration {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-panel, 18px);
  background: var(--color-surface-white);
  color: var(--color-text-primary);
  box-shadow: var(
    --feature-ui-panel-shadow,
    var(--shadow-card),
    inset 0 1px 0 var(--color-surface-white)
  );
}
.integrations-illustration__header {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 10px);
  padding: var(--feature-ui-chrome-padding, 16px 18px);
  border-bottom: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
  flex-shrink: 0;
}
.integrations-illustration__header-icon,
.integrations-illustration__hub-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--feature-ui-radius-icon, 11px);
  color: var(--color-text-primary);
  background: linear-gradient(
    135deg,
    var(--color-accent-lime),
    var(--color-accent-mint)
  );
}
.integrations-illustration__header > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.integrations-illustration__header strong {
  font-size: 14px;
}
.integrations-illustration__header > div > span {
  font-size: 12px;
  color: var(--color-text-muted);
}
.integrations-illustration__badge {
  margin-left: auto;
  padding: var(--feature-ui-space-1, 4px) var(--feature-ui-space-2, 8px);
  border-radius: var(--feature-ui-radius-badge, 6px);
  background: var(--color-surface-subtle);
  color: var(--color-text-muted);
  font-size: 11px;
  white-space: nowrap;
}
.integrations-illustration__canvas {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 16px;
  flex: 1;
  min-height: 0;
  padding: 20px 16px;
  background:
    radial-gradient(
      ellipse at center,
      color-mix(in srgb, var(--color-accent-lavender-soft) 50%, transparent),
      transparent 65%
    ),
    radial-gradient(var(--color-border-subtle) 0.7px, transparent 0.7px);
  background-size:
    auto,
    16px 16px;
}
.integrations-illustration__links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  overflow: visible;
}
.integrations-illustration__link {
  fill: none;
  stroke: var(--color-border-default);
  stroke-width: 1.5;
}
.integrations-illustration__link path {
  vector-effect: non-scaling-stroke;
}
.integrations-illustration__link--extension {
  stroke-dasharray: 4 5;
}
.integrations-illustration__link--accent {
  stroke-width: 3;
}
.integrations-illustration__hub {
  grid-column: 2;
  grid-row: 1 / 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--feature-ui-space-2, 7px);
  min-width: 0;
  width: 100%;
  padding: var(--feature-ui-space-4, 18px) var(--feature-ui-space-1, 4px);
  border: 1px solid var(--color-surface-inverse-raised);
  border-radius: var(--feature-ui-radius-card, 20px);
  color: var(--color-surface-white);
  background: var(--color-surface-inverse);
  box-shadow: var(
    --feature-ui-panel-shadow,
    0 0 0 6px rgba(255, 255, 255, 0.85),
    var(--shadow-card)
  );
}
.integrations-illustration__hub > strong {
  font-size: 19px;
  letter-spacing: -0.6px;
}
.integrations-illustration__hub > span:last-child {
  color: var(--color-border-subtle);
  font-size: 11px;
  white-space: nowrap;
}
.integrations-illustration__tool {
  grid-row: var(--tool-row);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--feature-ui-space-1, 5px);
  min-width: 0;
  padding: var(--feature-ui-space-3, 14px) var(--feature-ui-space-1, 5px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 14px);
  background: var(--color-surface-white);
  box-shadow: var(
    --feature-ui-card-shadow,
    0 2px 4px rgba(14, 35, 23, 0.02),
    0 8px 18px rgba(14, 35, 23, 0.04)
  );
}
.integrations-illustration__tool--left {
  grid-column: 1;
}
.integrations-illustration__tool--right {
  grid-column: 3;
}
.integrations-illustration__tool--extension {
  border-style: dashed;
  background: linear-gradient(
    145deg,
    var(--color-surface-white),
    var(--color-surface-subtle)
  );
}
.integrations-illustration__logo {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 3px;
}
.integrations-illustration__logo > svg {
  width: 32px;
  height: 32px;
}
.integrations-illustration__tool > strong {
  font-size: 15px;
  white-space: nowrap;
}
.integrations-illustration__detail {
  color: var(--color-text-muted);
  font-size: 12px;
  white-space: nowrap;
}
.integrations-illustration__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--feature-ui-space-3, 12px);
  flex-shrink: 0;
  padding: var(--feature-ui-foot-padding, 12px);
  border-top: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
  color: var(--color-text-muted);
  font-size: 12px;
}
.integrations-illustration__footer > i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-border-default);
}

/* All six illustrations share their desktop composition at small widths.
   The width ratio is computed in CSS before hydration; zoom also scales layout
   height, avoiding reserved desktop-height gaps beneath the artwork. */
#platform-workspace .product-demo-stage {
  height: auto;
}
@container feature-illustration (max-width: 520px) {
  #platform-workspace .feature-illustration {
    width: 560px;
    zoom: tan(atan2(100cqw, 560px));
  }
}

.product-highlight-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 24px;
}
.product-highlight-details {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: var(--font-body-small);
}
.product-highlight-details:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}

.connections-detail-scene {
  width: 560px;
  overflow: hidden;
  color: var(--color-text-primary);
  background: var(--color-surface-white);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-panel, var(--radius-card));
  box-shadow: var(--feature-ui-panel-shadow, var(--shadow-card));
  font-size: 13px;
  line-height: 1.6;
}
.connections-detail-scene :is(p, dl, dd) {
  margin: 0;
}
.connections-detail-scene :is(strong, b) {
  font-weight: 600;
}
.connections-detail-scene small {
  font-size: 11px;
  color: var(--color-text-muted);
}
.connections-detail-scene svg {
  flex-shrink: 0;
}
.connections-detail-scene .social-brand-icon {
  width: 23px;
  height: 23px;
  flex-shrink: 0;
  object-fit: contain;
}
.connections-detail-scene__chrome {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 10px);
  padding: var(--feature-ui-chrome-padding, 16px 20px);
  border-bottom: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
}
.connections-detail-scene__chrome > strong {
  font-size: 14px;
}
.connections-detail-scene__chrome > small {
  margin-left: auto;
}
.connections-detail-scene__mark {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: linear-gradient(
    135deg,
    var(--color-accent-lime-soft),
    var(--color-accent-mint-soft)
  );
  border-radius: var(--feature-ui-radius-icon, 9px);
}
.connections-detail-scene__foot {
  display: flex;
  gap: var(--feature-ui-space-1, 6px);
  align-items: center;
  padding: var(--feature-ui-foot-padding, 12px 20px);
  border-top: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
  color: var(--color-text-muted);
  font-size: 11px;
}
.connections-detail-scene__foot > svg {
  width: 14px;
  height: 14px;
}
.connections-detail-scene__accounts {
  padding: var(--feature-ui-space-4, 17px) var(--feature-ui-space-5, 20px)
    var(--feature-ui-space-5, 19px);
  display: grid;
  gap: var(--feature-ui-space-3, 14px);
}
.connections-detail-scene__channel-group > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--feature-ui-space-2, 10px);
  margin-bottom: 8px;
}
.connections-detail-scene__channel-group > div:first-child > small {
  font-size: 10px;
}
.connections-detail-scene__channel-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--feature-ui-space-2, 9px);
}
.connections-detail-scene__channel-options > div {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 10px);
  padding: var(--feature-ui-space-3, 11px) var(--feature-ui-space-3, 12px);
  border-radius: var(--feature-ui-radius-card, 10px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  background: linear-gradient(
    140deg,
    var(--color-surface-white),
    var(--color-surface-subtle)
  );
}
.connections-detail-scene__channel-options > div > svg {
  width: 23px;
  height: 23px;
}
.connections-detail-scene__routing {
  padding: var(--feature-ui-space-4, 18px) var(--feature-ui-space-5, 20px)
    var(--feature-ui-space-5, 20px);
}
.connections-detail-scene__route-headings {
  display: grid;
  grid-template-columns: 220px 1fr;
  color: var(--color-text-muted);
  font-size: 11px;
  margin-bottom: 9px;
}
.connections-detail-scene__route {
  display: grid;
  grid-template-columns: 186px 34px minmax(0, 1fr);
  align-items: center;
  margin-bottom: 12px;
}
.connections-detail-scene__account {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 10px);
  padding: var(--feature-ui-space-4, 17px) var(--feature-ui-space-3, 12px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 12px);
  background: var(--color-surface-subtle);
}
.connections-detail-scene__account > div {
  display: grid;
  gap: 3px;
}
.connections-detail-scene__route-arrow {
  display: grid;
  place-items: center;
  color: var(--color-text-muted);
}
.connections-detail-scene__agent {
  padding: var(--feature-ui-space-3, 12px) var(--feature-ui-space-3, 14px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 12px);
  background: linear-gradient(
    115deg,
    var(--color-accent-butter-soft),
    var(--color-surface-white)
  );
}
.connections-detail-scene__agent :is(strong, small) {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 6px);
}
.connections-detail-scene__agent > small {
  margin-top: 5px;
}
.connections-detail-scene__agent > small > svg {
  width: 13px;
  height: 13px;
}
.connections-detail-scene__test {
  margin-top: 17px;
  padding: var(--feature-ui-space-3, 12px) var(--feature-ui-space-3, 14px);
  border-radius: var(--feature-ui-radius-card, 11px);
  background: var(--color-surface-subtle);
}
.connections-detail-scene__test > strong {
  font-size: 12px;
}
.connections-detail-scene__test > div {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  gap: var(--feature-ui-space-2, 8px);
}
.connections-detail-scene__test > div > span {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 4px);
  color: var(--color-text-secondary);
  font-size: 11px;
}
.connections-detail-scene__test svg {
  width: 13px;
  height: 13px;
}
.connections-detail-scene__conversation {
  padding: var(--feature-ui-space-4, 16px) var(--feature-ui-space-5, 20px);
  background: linear-gradient(
    180deg,
    var(--color-surface-white),
    var(--color-surface-subtle)
  );
}
.connections-detail-scene__customer {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 8px);
  margin-bottom: 10px;
}
.connections-detail-scene__customer > span {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-accent-peach-soft);
}
.connections-detail-scene__customer .social-brand-icon {
  width: 16px;
  height: 16px;
}
.connections-detail-scene__incoming {
  width: max-content;
  max-width: 90%;
  padding: var(--feature-ui-space-2, 9px) var(--feature-ui-space-3, 13px);
  background: var(--color-surface-white);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 11px)
    var(--feature-ui-radius-card, 11px) var(--feature-ui-radius-card, 11px)
    var(--feature-ui-radius-tail, 3px);
}
.connections-detail-scene__reply-label {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--feature-ui-space-1, 5px);
  margin: 13px 0 6px;
}
.connections-detail-scene__reply-label > svg {
  width: 17px;
  height: 17px;
}
.connections-detail-scene__answer {
  padding: var(--feature-ui-space-2, 10px) var(--feature-ui-space-3, 14px);
  width: max-content;
  max-width: 91%;
  margin-left: auto !important;
  background: var(--color-accent-mint-soft);
  border-radius: var(--feature-ui-radius-card, 11px)
    var(--feature-ui-radius-card, 11px) var(--feature-ui-radius-tail, 3px)
    var(--feature-ui-radius-card, 11px);
}
.connections-detail-scene__handover {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 7px);
  padding: var(--feature-ui-space-2, 9px) 0;
  margin: 11px 0;
  border-block: 1px dashed var(--color-border-subtle);
  color: var(--color-text-secondary);
  font-size: 11px;
}
.connections-detail-scene__outgoing {
  padding: var(--feature-ui-space-2, 10px) var(--feature-ui-space-3, 14px);
  max-width: 85%;
  margin-left: auto !important;
  background: var(--color-accent-mint-soft);
  border-radius: var(--feature-ui-radius-card, 11px)
    var(--feature-ui-radius-card, 11px) var(--feature-ui-radius-tail, 3px)
    var(--feature-ui-radius-card, 11px);
}
.connections-detail-scene__delivered {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 5px);
  justify-content: flex-end;
  margin-top: 5px;
}
.connections-detail-scene__delivered > svg {
  width: 13px;
  height: 13px;
}
.connections-detail-scene__channel-note {
  padding: var(--feature-ui-space-2, 10px) var(--feature-ui-space-5, 20px);
  color: var(--color-text-secondary);
  background: var(--color-surface-subtle);
  font-size: 11px;
}
.connections-detail-scene__crm {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 55px minmax(0, 1fr);
  align-items: center;
  padding: var(--feature-ui-space-5, 22px) var(--feature-ui-space-5, 20px)
    var(--feature-ui-space-4, 15px);
}
.connections-detail-scene__lead {
  padding: var(--feature-ui-space-3, 14px);
  border-radius: var(--feature-ui-radius-card, 12px);
  background: var(--color-surface-subtle);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
}
.connections-detail-scene__lead > strong {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 8px);
  margin: 12px 0 15px;
}
.connections-detail-scene__lead > strong > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  background: var(--color-accent-lavender-soft);
  border-radius: var(--feature-ui-radius-card, 9px);
  font-size: 10px;
}
.connections-detail-scene__lead dl {
  display: grid;
  gap: var(--feature-ui-space-2, 9px);
}
.connections-detail-scene__lead dl > div {
  display: grid;
  grid-template-columns: 59px minmax(0, 1fr);
  gap: var(--feature-ui-space-2, 7px);
  font-size: 11px;
}
.connections-detail-scene__lead dt {
  color: var(--color-text-muted);
}
.connections-detail-scene__lead dd {
  overflow-wrap: anywhere;
}
.connections-detail-scene__sync-arrow {
  display: grid;
  justify-items: center;
  gap: var(--feature-ui-space-1, 4px);
  color: var(--color-text-muted);
}
.connections-detail-scene__sync-arrow > small {
  font-size: 9px;
}
.connections-detail-scene__crm-record {
  align-self: stretch;
  padding: var(--feature-ui-space-4, 16px) var(--feature-ui-space-3, 14px);
  border-radius: var(--feature-ui-radius-card, 12px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  background: linear-gradient(
    150deg,
    var(--color-surface-white),
    var(--color-accent-lavender-soft)
  );
}
.connections-detail-scene__crm-record > div {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 8px);
  margin-bottom: 16px;
}
.connections-detail-scene__crm-record section + section {
  margin-top: 12px;
}
.connections-detail-scene__crm-record p {
  font-size: 11px;
  margin-top: 3px;
}
.connections-detail-scene__dedupe {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 5px);
  font-size: 10px;
  margin-top: 14px;
}
.connections-detail-scene__dedupe > svg {
  width: 13px;
  height: 13px;
}
.connections-detail-scene__alternative {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 9px);
  margin: 0 20px 18px;
  padding: var(--feature-ui-space-3, 11px) var(--feature-ui-space-3, 14px);
  border-radius: var(--feature-ui-radius-card, 10px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  font-size: 12px;
}
.connections-detail-scene__alternative small {
  margin-left: auto;
}
.connections-detail-scene__operations {
  display: grid;
  gap: var(--feature-ui-space-3, 12px);
  padding: var(--feature-ui-space-5, 20px);
}
.connections-detail-scene__operation {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: var(--feature-ui-space-4, 16px);
  padding: var(--feature-ui-space-3, 14px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 12px);
}
.connections-detail-scene__tool {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: var(--feature-ui-space-1, 4px) var(--feature-ui-space-2, 8px);
}
.connections-detail-scene__tool > svg {
  grid-row: span 2;
}
.connections-detail-scene__tool > small {
  grid-column: 2;
  font-size: 10px;
}
.connections-detail-scene__tool-result {
  border-left: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
  padding-left: 15px;
  font-size: 12px;
}
.connections-detail-scene__tool-result > span {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 5px);
  color: var(--color-text-muted);
  font-size: 10px;
  margin-top: 6px;
}
.connections-detail-scene__tool-result svg {
  width: 13px;
  height: 13px;
}
.connections-detail-scene__mcp {
  display: grid;
  grid-template-columns: 175px minmax(0, 1fr);
}
.connections-detail-scene__mcp > aside {
  background: var(--color-surface-subtle);
  padding: var(--feature-ui-space-5, 20px) var(--feature-ui-space-4, 15px);
  border-right: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
}
.connections-detail-scene__mcp > aside > strong {
  display: block;
  margin-top: 8px;
  font-size: 13px;
}
.connections-detail-scene__transport {
  display: inline-block;
  margin-top: 6px;
  padding: 2px var(--feature-ui-space-2, 8px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: 5px;
  background: var(--color-surface-white);
}
.connections-detail-scene__tools {
  display: grid;
  gap: var(--feature-ui-space-2, 10px);
  margin-top: 20px;
}
.connections-detail-scene__tools > div {
  padding: var(--feature-ui-space-2, 10px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 8px);
  background: var(--color-surface-white);
}
.connections-detail-scene__tools strong {
  display: block;
  font-size: 11px;
}
.connections-detail-scene__tools small {
  display: flex;
  gap: var(--feature-ui-space-1, 4px);
  align-items: center;
  font-size: 10px;
  margin-top: 4px;
}
.connections-detail-scene__tools svg {
  width: 12px;
  height: 12px;
}
.connections-detail-scene__execution {
  padding: var(--feature-ui-space-4, 18px);
}
.connections-detail-scene__execution > p {
  font-size: 12px;
  margin-top: 5px;
}
.connections-detail-scene__call {
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 9px);
  background: var(--color-surface-subtle);
  padding: var(--feature-ui-space-3, 12px);
  margin-top: 15px;
}
.connections-detail-scene__call > small {
  display: flex;
  gap: var(--feature-ui-space-1, 6px);
  align-items: center;
}
.connections-detail-scene__call > small > svg {
  width: 13px;
  height: 13px;
}
.connections-detail-scene__call code {
  display: block;
  font-size: 11px;
  margin-top: 7px;
}
.connections-detail-scene__call > span {
  display: block;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
  font-size: 11px;
}
.connections-detail-scene__tool-answer {
  margin-top: 13px;
  padding: var(--feature-ui-space-3, 12px);
  border-radius: var(--feature-ui-radius-card, 10px);
  background: linear-gradient(
    110deg,
    var(--color-accent-lavender-soft),
    var(--color-accent-mint-soft)
  );
}
.connections-detail-scene__tool-answer > strong {
  display: flex;
  gap: var(--feature-ui-space-1, 5px);
  align-items: center;
  font-size: 11px;
}
.connections-detail-scene__tool-answer p {
  font-size: 12px;
  margin-top: 5px;
}
.commerce-workflow-scene {
  overflow: hidden;
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-panel, var(--radius-card));
  background: var(--color-surface-white);
  box-shadow: var(--feature-ui-panel-shadow, var(--shadow-card));
  color: var(--color-text-primary);
  font-size: 13px;
  line-height: 1.6;
}
.commerce-workflow-scene :is(p, h3, dl, dd) {
  margin: 0;
}
.commerce-workflow-scene :is(strong, b) {
  font-weight: 600;
}
.commerce-workflow-scene small {
  font-size: 11px;
  color: var(--color-text-muted);
}
.commerce-workflow-scene svg {
  flex-shrink: 0;
}
.commerce-workflow-scene__chrome {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 10px);
  min-height: 60px;
  padding: var(--feature-ui-chrome-padding, 14px 18px);
  border-bottom: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
}
.commerce-workflow-scene__chrome > strong {
  font-size: 14px;
}
.commerce-workflow-scene__chrome > small {
  margin-left: auto;
  padding: 3px var(--feature-ui-space-2, 8px);
  border-radius: var(--feature-ui-radius-card, 6px);
  background: var(--color-surface-subtle);
}
.commerce-workflow-scene__mark,
.commerce-workflow-scene__tiny-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: var(--feature-ui-radius-icon, 9px);
  background: linear-gradient(
    135deg,
    var(--color-accent-lime-soft),
    var(--color-accent-mint-soft)
  );
}
.commerce-workflow-scene__tiny-mark {
  width: 22px;
  height: 22px;
  border-radius: var(--feature-ui-radius-icon, 7px);
}
.commerce-workflow-scene__tiny-mark svg {
  width: 14px;
  height: 14px;
}
.commerce-workflow-scene__foot {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 7px);
  min-height: 40px;
  padding: var(--feature-ui-foot-padding, 11px 18px);
  border-top: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
  font-size: 10px;
  color: var(--color-text-muted);
}
.commerce-workflow-scene__foot svg {
  width: 13px;
  height: 13px;
}
.commerce-workflow-scene__shop-body {
  display: grid;
  grid-template-columns: 172px minmax(0, 1fr);
  gap: var(--feature-ui-space-4, 18px);
  padding: var(--feature-ui-space-5, 20px);
}
.commerce-workflow-scene__catalog {
  padding: var(--feature-ui-space-3, 14px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 12px);
  background: linear-gradient(
    160deg,
    var(--color-surface-white),
    var(--color-accent-lime-soft)
  );
}
.commerce-workflow-scene__brand {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 7px);
  font-size: 9px;
  font-weight: 600;
  line-height: 1.3;
}
.commerce-workflow-scene__brand span {
  max-width: 80px;
}
.commerce-workflow-scene__product-art {
  display: grid;
  place-items: center;
  height: 118px;
  margin: 12px 0 6px;
}
.commerce-workflow-scene__catalog > :is(strong, small, b) {
  display: block;
}
.commerce-workflow-scene__catalog > b {
  margin-top: 8px;
  font-size: 16px;
}
.commerce-workflow-scene__catalog-note {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 5px);
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
  font-size: 10px;
  color: var(--color-text-secondary);
}
.commerce-workflow-scene__catalog-note svg {
  width: 14px;
  height: 14px;
}
.commerce-workflow-scene__question {
  padding: var(--feature-ui-space-3, 11px) var(--feature-ui-space-3, 13px);
  border-radius: var(--feature-ui-radius-card, 11px)
    var(--feature-ui-radius-card, 11px) var(--feature-ui-radius-tail, 3px)
    var(--feature-ui-radius-card, 11px);
  background: var(--color-text-primary);
  color: var(--color-surface-white);
  font-size: 12px;
  line-height: 1.6;
}
.commerce-workflow-scene__order-chat > .commerce-workflow-scene__question {
  margin-left: 18px;
}
.commerce-workflow-scene__checked {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 5px);
  color: var(--color-text-secondary);
  font-size: 10px;
}
.commerce-workflow-scene__checked svg {
  width: 13px;
  height: 13px;
}
.commerce-workflow-scene__order-chat > .commerce-workflow-scene__checked {
  margin: 12px 0;
}
.commerce-workflow-scene__order-record {
  padding: var(--feature-ui-space-3, 12px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 11px);
}
.commerce-workflow-scene__order-record > strong {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 7px);
}
.commerce-workflow-scene__order-record dl {
  margin-top: 9px;
  display: grid;
  gap: var(--feature-ui-space-1, 5px);
}
.commerce-workflow-scene__order-record dl > div {
  display: flex;
  justify-content: space-between;
  gap: var(--feature-ui-space-2, 10px);
  font-size: 10px;
}
.commerce-workflow-scene__order-record dt {
  color: var(--color-text-muted);
}
.commerce-workflow-scene__answer {
  margin-top: 12px;
  padding: var(--feature-ui-space-3, 12px);
  border-radius: var(--feature-ui-radius-card, 11px);
  background: var(--color-accent-mint-soft);
}
.commerce-workflow-scene__answer strong {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 6px);
  font-size: 11px;
}
.commerce-workflow-scene__answer svg {
  width: 14px;
  height: 14px;
}
.commerce-workflow-scene__answer p {
  margin-top: 7px;
  font-size: 11px;
}
.commerce-workflow-scene__site-body {
  display: grid;
  grid-template-columns: 172px minmax(0, 1fr);
  min-height: 326px;
}
.commerce-workflow-scene__settings {
  padding: var(--feature-ui-space-5, 20px) var(--feature-ui-space-4, 16px);
  background: var(--color-surface-subtle);
  border-right: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
}
.commerce-workflow-scene__settings > strong {
  display: block;
  margin-bottom: 16px;
}
.commerce-workflow-scene__settings
  > div:not(.commerce-workflow-scene__setting-state) {
  display: grid;
  gap: var(--feature-ui-space-1, 5px);
  margin-bottom: 12px;
}
.commerce-workflow-scene__settings > div > span {
  padding: var(--feature-ui-space-2, 7px) var(--feature-ui-space-2, 9px);
  background: var(--color-surface-white);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 7px);
  font-size: 11px;
}
.commerce-workflow-scene__setting-state {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 5px);
  margin-top: 18px;
  font-size: 10px;
}
.commerce-workflow-scene__setting-state svg {
  width: 14px;
  height: 14px;
}
.commerce-workflow-scene__site-preview {
  padding: 0 var(--feature-ui-space-4, 18px) var(--feature-ui-space-4, 18px);
  background: linear-gradient(
    150deg,
    var(--color-surface-white),
    var(--color-accent-mint-soft)
  );
}
.commerce-workflow-scene__browser {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 4px);
  height: 30px;
  border-bottom: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
}
.commerce-workflow-scene__browser i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-border-subtle);
}
.commerce-workflow-scene__browser span {
  margin-left: 7px;
  font-size: 9px;
  color: var(--color-text-muted);
}
.commerce-workflow-scene__site-brand {
  margin-top: 15px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.commerce-workflow-scene__site-topics {
  display: flex;
  gap: var(--feature-ui-space-4, 15px);
  font-size: 9px;
  color: var(--color-text-muted);
  margin-top: 5px;
}
.commerce-workflow-scene__site-preview > h3 {
  font-size: 19px;
  max-width: 215px;
  margin-top: 18px;
  line-height: 1.5;
}
.commerce-workflow-scene__widget {
  width: 245px;
  margin: 16px 0 0 auto;
  padding: var(--feature-ui-space-3, 12px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  background: var(--color-surface-white);
  box-shadow: var(--feature-ui-card-shadow, var(--shadow-card));
  border-radius: var(--feature-ui-radius-card, 12px);
}
.commerce-workflow-scene__widget > strong {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 7px);
  font-size: 12px;
}
.commerce-workflow-scene__widget > small {
  display: block;
  margin-top: 7px;
  font-size: 10px;
}
.commerce-workflow-scene__widget .commerce-workflow-scene__question {
  display: table;
  margin: 8px 0 8px auto;
  padding: var(--feature-ui-space-1, 6px) var(--feature-ui-space-2, 9px);
  font-size: 10px;
}
.commerce-workflow-scene__widget > p:last-child {
  font-size: 11px;
}
.commerce-workflow-scene__handoff-body {
  padding: var(--feature-ui-space-5, 20px);
}
.commerce-workflow-scene__customer {
  display: flex;
  gap: var(--feature-ui-space-2, 10px);
  align-items: flex-start;
  margin-bottom: 18px;
}
.commerce-workflow-scene__customer > span {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  font-size: 11px;
  border-radius: var(--feature-ui-radius-card, 10px);
  background: var(--color-accent-peach-soft);
}
.commerce-workflow-scene__customer strong {
  font-size: 11px;
}
.commerce-workflow-scene__customer p {
  margin-top: 4px;
  padding: var(--feature-ui-space-2, 10px) var(--feature-ui-space-3, 13px);
  border-radius: 0 10px 10px;
  background: var(--color-surface-subtle);
  font-size: 12px;
}
.commerce-workflow-scene__handoff-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--feature-ui-space-3, 14px);
}
.commerce-workflow-scene__lead-record {
  padding: var(--feature-ui-space-3, 14px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 12px);
}
.commerce-workflow-scene__lead-record > strong {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 6px);
  font-size: 12px;
}
.commerce-workflow-scene__lead-record dl {
  display: grid;
  gap: var(--feature-ui-space-3, 11px);
  margin-top: 14px;
}
.commerce-workflow-scene__lead-record dl > div {
  display: grid;
  gap: 2px;
}
.commerce-workflow-scene__lead-record dt {
  font-size: 10px;
  color: var(--color-text-muted);
}
.commerce-workflow-scene__lead-record dd {
  font-size: 12px;
}
.commerce-workflow-scene__transfer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--feature-ui-space-4, 17px) var(--feature-ui-space-3, 14px);
  border-radius: var(--feature-ui-radius-card, 12px);
  background: linear-gradient(
    135deg,
    var(--color-accent-mint-soft),
    var(--color-accent-lime-soft)
  );
}
.commerce-workflow-scene__transfer-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-surface-white);
  margin-bottom: 10px;
}
.commerce-workflow-scene__transfer > strong {
  margin-top: 4px;
  font-size: 12px;
}
.commerce-workflow-scene__transfer > p {
  margin-top: 15px;
  padding: var(--feature-ui-space-2, 10px);
  border-radius: var(--feature-ui-radius-card, 9px);
  background: var(--color-surface-white);
  font-size: 11px;
}
.commerce-workflow-scene__transfer > .commerce-workflow-scene__checked {
  margin-top: auto;
  padding-top: 13px;
  font-size: 9px;
}
.commerce-workflow-scene__canvas {
  padding: 23px 25px 14px;
  background-image: radial-gradient(
    var(--color-border-subtle) 0.7px,
    transparent 0.7px
  );
  background-size: 13px 13px;
}
.commerce-workflow-scene__canvas-node {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 180px;
  min-height: 45px;
  margin-inline: auto;
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 10px);
  box-shadow: var(--feature-ui-card-shadow, 0 3px 9px rgba(12, 30, 20, 0.035));
  font-size: 12px;
}
.commerce-workflow-scene__canvas-node--start {
  background: var(--color-accent-mint-soft);
}
.commerce-workflow-scene__canvas-node--condition {
  background: var(--color-accent-sky-soft);
}
.commerce-workflow-scene__stem {
  display: block;
  width: 1px;
  height: 25px;
  margin-inline: auto;
  border-left: 1px dashed var(--color-text-muted);
}
.commerce-workflow-scene__branches {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--feature-ui-space-3, 14px);
  padding-top: 42px;
}
.commerce-workflow-scene__branches > svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 42px;
  fill: none;
  stroke: var(--color-text-muted);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}
.commerce-workflow-scene__branch {
  position: relative;
  min-width: 0;
  text-align: center;
}
.commerce-workflow-scene__branch > small {
  display: inline-block;
  margin-bottom: 9px;
  padding-inline: var(--feature-ui-space-1, 6px);
  background: var(--color-surface-white);
}
.commerce-workflow-scene__branch > div {
  min-height: 85px;
  padding: var(--feature-ui-space-3, 14px) var(--feature-ui-space-2, 9px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 10px);
  background: var(--color-surface-white);
  text-align: left;
}
.commerce-workflow-scene__branch--ai > div {
  background: var(--color-accent-lime-soft);
}
.commerce-workflow-scene__branch--form > div {
  background: var(--color-accent-sky-soft);
}
.commerce-workflow-scene__branch strong {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 5px);
  font-size: 12px;
}
.commerce-workflow-scene__branch strong svg {
  width: 16px;
  height: 16px;
}
.commerce-workflow-scene__branch span {
  display: block;
  margin-top: 8px;
  color: var(--color-text-secondary);
  font-size: 10px;
}
.commerce-workflow-scene__canvas-note {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
  color: var(--color-text-muted);
  font-size: 10px;
}
.commerce-workflow-scene__canvas-note > span:last-child {
  display: flex;
  align-items: center;
  gap: 5px;
}
.commerce-workflow-scene__canvas-note svg {
  width: 13px;
  height: 13px;
}
.commerce-workflow-scene__form-body {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
}
.commerce-workflow-scene__form-config {
  padding: var(--feature-ui-space-5, 20px);
  background: var(--color-surface-subtle);
  border-right: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
}
.commerce-workflow-scene__form-config > strong {
  display: block;
  margin-bottom: 12px;
  font-size: 12px;
}
.commerce-workflow-scene__form-config > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--feature-ui-space-2, 9px) var(--feature-ui-space-2, 10px);
  margin-top: 7px;
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 8px);
  background: var(--color-surface-white);
  font-size: 12px;
}
.commerce-workflow-scene__form-config small {
  display: block;
  font-size: 9px;
}
.commerce-workflow-scene__form-config b {
  padding: 2px var(--feature-ui-space-1, 6px);
  font-size: 10px;
  border-radius: var(--feature-ui-radius-card, 4px);
  color: var(--color-text-muted);
  background: var(--color-surface-subtle);
}
.commerce-workflow-scene__form-config b.is-required {
  background: var(--color-accent-sky-soft);
  color: var(--color-text-primary);
}
.commerce-workflow-scene__form-config > .commerce-workflow-scene__checked {
  margin-top: 16px;
}
.commerce-workflow-scene__form-preview {
  padding: var(--feature-ui-space-5, 20px);
}
.commerce-workflow-scene__fake-field {
  margin-top: 12px;
}
.commerce-workflow-scene__fake-field > span {
  display: block;
  font-size: 11px;
  margin-bottom: 5px;
}
.commerce-workflow-scene__fake-field b {
  color: var(--color-text-muted);
}
.commerce-workflow-scene__fake-field > strong {
  display: block;
  padding: var(--feature-ui-space-2, 9px) var(--feature-ui-space-3, 11px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-control, 7px);
  font-size: 12px;
  font-weight: 400;
}
.commerce-workflow-scene__form-preview > .commerce-workflow-scene__checked {
  margin-top: 11px;
}
.commerce-workflow-scene__form-result {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 7px);
  margin-top: 18px;
  padding: var(--feature-ui-space-3, 12px);
  border-radius: var(--feature-ui-radius-card, 9px);
  background: var(--color-accent-sky-soft);
  font-size: 11px;
}
.commerce-workflow-scene__next {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 7px);
  margin-top: 12px;
  font-size: 11px;
}
.commerce-workflow-scene__next > span {
  color: var(--color-text-muted);
}
.commerce-workflow-scene__release-body {
  padding: var(--feature-ui-space-5, 20px);
}
.commerce-workflow-scene__release-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 17px;
}
.commerce-workflow-scene__release-heading > span {
  font-size: 10px;
  padding: 3px var(--feature-ui-space-2, 8px);
  border-radius: var(--feature-ui-radius-card, 6px);
  background: var(--color-accent-sky-soft);
}
.commerce-workflow-scene__test-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--feature-ui-space-4, 16px);
}
.commerce-workflow-scene__tests > small {
  display: block;
  margin-bottom: 12px;
}
.commerce-workflow-scene__tests > div {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--feature-ui-space-2, 7px);
  padding: var(--feature-ui-space-3, 12px) 0;
  border-bottom: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
}
.commerce-workflow-scene__tests svg {
  width: 14px;
  height: 14px;
}
.commerce-workflow-scene__tests strong {
  font-size: 11px;
}
.commerce-workflow-scene__tests small {
  font-size: 9px;
}
.commerce-workflow-scene__test-chat {
  padding: var(--feature-ui-space-3, 13px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 12px);
  background: var(--color-surface-subtle);
}
.commerce-workflow-scene__test-chat > .commerce-workflow-scene__question {
  margin-top: 12px;
  font-size: 11px;
}
.commerce-workflow-scene__test-answer {
  margin-top: 10px !important;
  padding: var(--feature-ui-space-2, 10px);
  background: var(--color-surface-white);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 9px);
  font-size: 11px;
}
.commerce-workflow-scene__test-chat > span {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 4px);
  margin-top: 12px;
  font-size: 9px;
  color: var(--color-text-muted);
}
.commerce-workflow-scene__test-chat > span svg {
  width: 13px;
  height: 13px;
}
.commerce-workflow-scene__publish-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 19px;
  padding-top: 16px;
  border-top: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
}
.commerce-workflow-scene__publish-row > span {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 5px);
  color: var(--color-text-muted);
  font-size: 10px;
}
.commerce-workflow-scene__publish-row > b {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 10px);
  padding: var(--feature-ui-space-2, 7px) var(--feature-ui-space-3, 12px);
  font-size: 12px;
  border-radius: var(--feature-ui-radius-card, 8px);
  background: linear-gradient(
    135deg,
    var(--color-accent-lime-soft),
    var(--color-accent-mint-soft)
  );
}
/* Fixed composition. The containing specialty figure scales the whole canvas. */
.ai-language-scene {
  overflow: hidden;
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-panel, 20px);
  background: var(--color-surface-white);
  box-shadow: var(--feature-ui-panel-shadow, var(--shadow-card));
  color: var(--color-text-primary);
  font-size: 13px;
  line-height: 1.55;
}
.ai-language-scene :is(p, dl, dd) {
  margin: 0;
}
.ai-language-scene :is(strong, b) {
  font-weight: 600;
}
.ai-language-scene small {
  font-size: 11px;
  color: var(--color-text-muted);
}
.ai-language-scene svg {
  flex-shrink: 0;
}
.ai-language-scene__chrome {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 10px);
  padding: var(--feature-ui-chrome-padding, 16px 20px);
  border-bottom: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
}
.ai-language-scene__chrome > small {
  margin-left: auto;
}
.ai-language-scene__mark,
.ai-language-scene__tiny-mark {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: var(--feature-ui-radius-icon, 10px);
  background: linear-gradient(
    135deg,
    var(--color-accent-lime-soft),
    var(--color-accent-mint-soft)
  );
}
.ai-language-scene__tiny-mark {
  width: 23px;
  height: 23px;
  border-radius: var(--feature-ui-radius-icon, 7px);
}
.ai-language-scene__tiny-mark svg {
  width: 15px;
  height: 15px;
}
.ai-language-scene__foot {
  display: flex;
  align-items: flex-start;
  gap: var(--feature-ui-space-1, 6px);
  padding: var(--feature-ui-foot-padding, 12px 18px);
  border-top: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
  font-size: 10px;
  line-height: 1.6;
  color: var(--color-text-muted);
}
.ai-language-scene__foot svg {
  width: 14px;
  height: 14px;
  margin-top: 1px;
}
.ai-language-scene__connection-body {
  padding: var(--feature-ui-space-5, 20px);
}
.ai-language-scene__row-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--feature-ui-space-2, 10px);
}
.ai-language-scene__row-heading > strong {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 7px);
}
.ai-language-scene__providers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--feature-ui-space-2, 9px);
  margin-top: 12px;
}
.ai-language-scene__providers > div {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--feature-ui-space-2, 7px);
  padding: var(--feature-ui-space-3, 12px) var(--feature-ui-space-2, 8px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 12px);
  background: var(--color-surface-white);
  font-size: 12px;
}
.ai-language-scene__providers img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}
.ai-language-scene__connection-divider {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-3, 12px);
  margin: 13px 0;
  color: var(--color-text-muted);
  font-size: 10px;
}
.ai-language-scene__connection-divider:before,
.ai-language-scene__connection-divider:after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border-subtle);
}
.ai-language-scene__endpoint {
  padding: var(--feature-ui-space-4, 15px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 14px);
  background: linear-gradient(
    135deg,
    var(--color-surface-subtle),
    var(--color-accent-mint-soft)
  );
}
.ai-language-scene__field {
  margin-top: 12px;
  min-width: 0;
}
.ai-language-scene__field > small {
  display: block;
  margin-bottom: 4px;
}
.ai-language-scene__field > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--feature-ui-space-2, 8px);
  padding: var(--feature-ui-space-2, 8px) var(--feature-ui-space-2, 10px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-control, 6px);
  background: var(--color-surface-white);
  font-size: 12px;
}
.ai-language-scene__field svg {
  width: 13px;
  height: 13px;
  color: var(--color-text-muted);
}
.ai-language-scene__field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--feature-ui-space-3, 12px);
}
.ai-language-scene__validation-body {
  padding: var(--feature-ui-space-5, 20px);
}
.ai-language-scene__test-question {
  width: fit-content;
  max-width: 85%;
  margin-left: auto;
  padding: var(--feature-ui-space-3, 11px) var(--feature-ui-space-4, 15px);
  border-radius: var(--feature-ui-radius-card, 12px)
    var(--feature-ui-radius-card, 12px) var(--feature-ui-radius-tail, 2px)
    var(--feature-ui-radius-card, 12px);
  background: var(--color-surface-inverse);
  color: var(--color-surface-white);
}
.ai-language-scene__test-answer {
  margin-top: 14px;
  padding: var(--feature-ui-space-3, 14px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 12px);
  background: linear-gradient(
    120deg,
    var(--color-surface-white),
    var(--color-accent-mint-soft)
  );
}
.ai-language-scene__test-answer > strong {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 6px);
}
.ai-language-scene__test-answer > p {
  margin-top: 10px;
}
.ai-language-scene__test-answer > small {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 5px);
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
}
.ai-language-scene__test-answer > small svg {
  width: 14px;
  height: 14px;
}
.ai-language-scene__test-checks {
  display: grid;
  gap: var(--feature-ui-space-3, 11px);
  margin-top: 19px;
}
.ai-language-scene__test-checks > div {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 10px);
}
.ai-language-scene__test-checks > div > div {
  display: grid;
  gap: 1px;
}
.ai-language-scene__test-checks > div > span:last-child {
  margin-left: auto;
  color: var(--color-text-muted);
  font-size: 10px;
}
.ai-language-scene__check-state {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: 50%;
  color: var(--color-text-muted);
  font-size: 11px;
}
.ai-language-scene__check-state.is-checked {
  background: var(--color-accent-mint-soft);
  border-color: var(--color-accent-mint-soft);
  color: var(--color-text-primary);
}
.ai-language-scene__check-state svg {
  width: 14px;
  height: 14px;
}
.ai-language-scene__knowledge-body {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: var(--feature-ui-space-4, 16px);
  padding: var(--feature-ui-space-5, 20px);
}
.ai-language-scene__document {
  padding: var(--feature-ui-space-4, 16px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 12px);
  background: linear-gradient(
    155deg,
    var(--color-surface-white),
    var(--color-accent-peach-soft)
  );
}
.ai-language-scene__document-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 40px;
  margin-bottom: 12px;
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-icon, 6px);
  background: var(--color-surface-white);
}
.ai-language-scene__document-icon svg {
  width: 23px;
  height: 23px;
}
.ai-language-scene__document dl {
  display: grid;
  gap: var(--feature-ui-space-4, 16px);
  margin-top: 20px;
  padding-top: 17px;
  border-top: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
}
.ai-language-scene__document dt {
  font-size: 10px;
  color: var(--color-text-muted);
}
.ai-language-scene__document dd {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
}
.ai-language-scene__language-replies {
  display: grid;
  gap: var(--feature-ui-space-3, 12px);
}
.ai-language-scene__language-replies article {
  padding: var(--feature-ui-space-3, 14px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 12px);
}
.ai-language-scene__language-replies article > strong {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 7px);
  margin-bottom: 8px;
}
.ai-language-scene__language-replies article > p {
  font-size: 12px;
  line-height: 1.55;
}
.ai-language-scene__language-replies
  article
  > .ai-language-scene__reply-question {
  margin-bottom: 9px;
  padding-bottom: 9px;
  border-bottom: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
  font-size: 11px;
  color: var(--color-text-muted);
}
.ai-language-scene__language-replies img,
.ai-language-scene__language-setting img {
  object-fit: cover;
  border-radius: var(--feature-ui-radius-card, 2px);
  box-shadow: 0 0 0 1px var(--color-border-subtle);
}
.ai-language-scene__configuration-body {
  padding: var(--feature-ui-space-5, 22px);
}
.ai-language-scene__language-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--feature-ui-space-4, 16px);
}
.ai-language-scene__language-setting > span {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 8px);
  width: 170px;
  padding: var(--feature-ui-space-2, 10px) var(--feature-ui-space-3, 12px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 8px);
}
.ai-language-scene__language-setting > span > svg {
  margin-left: auto;
  width: 14px;
  height: 14px;
}
.ai-language-scene__instructions {
  margin-top: 20px;
}
.ai-language-scene__instructions > strong {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 7px);
}
.ai-language-scene__instructions > p {
  margin-top: 10px;
  white-space: pre-line;
  padding: var(--feature-ui-space-4, 16px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 12px);
  background: var(--color-surface-subtle);
  font-size: 13px;
  line-height: 1.9;
}
.ai-language-scene__language-checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--feature-ui-space-2, 10px) var(--feature-ui-space-4, 16px);
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
}
.ai-language-scene__language-checks > strong {
  grid-column: 1 / -1;
}
.ai-language-scene__language-checks > span {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 6px);
  font-size: 11px;
  color: var(--color-text-secondary);
}
.ai-language-scene__language-checks > span svg {
  width: 14px;
  height: 14px;
}
/* Fixed composition; specialty-detail__canvas scales the complete artwork. */
.chat-widget-scene {
  display: flex;
  flex-direction: column;
  width: 560px;
  min-height: 414px;
  overflow: hidden;
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-panel, 20px);
  background: var(--color-surface-white);
  color: var(--color-text-primary);
  box-shadow: var(--feature-ui-panel-shadow, var(--shadow-card));
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.55;
}
.chat-widget-scene p {
  margin: 0;
}
.chat-widget-scene :is(strong, b) {
  font-weight: 600;
}
.chat-widget-scene small {
  font-size: 11px;
  color: var(--color-text-muted);
}
.chat-widget-scene svg {
  flex-shrink: 0;
}
.chat-widget-scene__chrome {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 10px);
  padding: var(--feature-ui-chrome-padding, 15px 18px);
  border-bottom: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
}
.chat-widget-scene__chrome > small {
  margin-left: auto;
  white-space: nowrap;
}
.chat-widget-scene__mark {
  display: inline-grid;
  flex-shrink: 0;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--feature-ui-radius-icon, 10px);
  background: linear-gradient(
    135deg,
    var(--color-accent-lime-soft),
    var(--color-accent-mint-soft)
  );
}
.chat-widget-scene__foot {
  display: flex;
  align-items: flex-start;
  gap: var(--feature-ui-space-1, 6px);
  margin-top: auto;
  padding: var(--feature-ui-foot-padding, 11px 17px);
  border-top: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
  color: var(--color-text-muted);
  font-size: 10px;
  line-height: 1.6;
}
.chat-widget-scene__foot svg {
  width: 14px;
  height: 14px;
  margin-top: 1px;
}
.chat-widget-scene__hero-body {
  position: relative;
  min-height: 354px;
  padding: var(--feature-ui-space-5, 19px);
  background: linear-gradient(
    140deg,
    var(--color-surface-subtle),
    var(--color-surface-white) 65%
  );
}
.chat-widget-scene__site {
  width: 100%;
  height: 280px;
  overflow: hidden;
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 12px);
  background: var(--color-surface-white);
}
.chat-widget-scene__site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--feature-ui-space-3, 12px) var(--feature-ui-space-4, 15px);
  border-bottom: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
}
.chat-widget-scene__site-nav b {
  font-size: 11px;
  letter-spacing: 1.4px;
}
.chat-widget-scene__site-nav svg {
  width: 15px;
  height: 15px;
}
.chat-widget-scene__site-copy {
  padding: var(--feature-ui-space-6, 24px) var(--feature-ui-space-4, 16px);
  width: 225px;
}
.chat-widget-scene__site-copy > strong {
  display: block;
  margin-top: 9px;
  font-size: 21px;
  line-height: 1.45;
  letter-spacing: -0.5px;
  white-space: pre-line;
}
.chat-widget-scene__site-copy > span {
  display: block;
  margin-top: 13px;
  font-size: 9px;
  color: var(--color-text-muted);
}
.chat-widget-scene__swatches {
  display: flex;
  gap: var(--feature-ui-space-2, 7px);
  margin-top: 18px;
}
.chat-widget-scene__swatches i {
  width: 48px;
  height: 55px;
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 9px);
  background: linear-gradient(
    145deg,
    var(--color-surface-white),
    var(--color-accent-mint-soft)
  );
}
.chat-widget-scene__swatches i:nth-child(2) {
  background: linear-gradient(
    145deg,
    var(--color-surface-white),
    var(--color-accent-peach-soft)
  );
}
.chat-widget-scene__swatches i:nth-child(3) {
  background: linear-gradient(
    145deg,
    var(--color-surface-white),
    var(--color-accent-lime-soft)
  );
}
.chat-widget-scene__chat-window {
  position: absolute;
  top: 56px;
  right: 28px;
  width: 278px;
  overflow: hidden;
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-panel, 15px);
  background: var(--color-surface-white);
  box-shadow: var(--feature-ui-panel-shadow, var(--shadow-card-hover));
}
.chat-widget-scene__chat-heading {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 8px);
  padding: var(--feature-ui-space-3, 12px);
  border-bottom: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
  background: linear-gradient(
    110deg,
    var(--color-surface-white),
    var(--color-accent-mint-soft)
  );
}
.chat-widget-scene__chat-heading > div {
  display: grid;
  gap: 2px;
}
.chat-widget-scene__chat-heading strong {
  font-size: 12px;
}
.chat-widget-scene__chat-heading small {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 5px);
  font-size: 10px;
}
.chat-widget-scene__chat-heading small i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-status-success);
}
.chat-widget-scene__chat-heading > span:last-child {
  margin-left: auto;
}
.chat-widget-scene__chat-content {
  padding: var(--feature-ui-space-3, 13px) var(--feature-ui-space-3, 12px);
}
.chat-widget-scene__question {
  width: fit-content;
  max-width: 100%;
  margin-left: auto !important;
  padding: var(--feature-ui-space-2, 9px) var(--feature-ui-space-3, 12px);
  border-radius: var(--feature-ui-radius-card, 11px)
    var(--feature-ui-radius-card, 11px) var(--feature-ui-radius-tail, 2px)
    var(--feature-ui-radius-card, 11px);
  background: var(--color-surface-inverse);
  color: var(--color-surface-white);
  font-size: 12px;
}
.chat-widget-scene__answer {
  margin-top: 12px !important;
  font-size: 12px;
  line-height: 1.65;
}
.chat-widget-scene__source {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 5px);
  margin-top: 9px;
  color: var(--color-text-muted);
  font-size: 10px;
}
.chat-widget-scene__source svg {
  width: 13px;
  height: 13px;
}
.chat-widget-scene__handover {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 6px);
  margin-top: 13px;
  padding: var(--feature-ui-space-2, 7px) var(--feature-ui-space-2, 9px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 8px);
  font-size: 11px;
}
.chat-widget-scene__handover svg {
  width: 14px;
  height: 14px;
}
.chat-widget-scene__handover svg:last-child {
  margin-left: auto;
}
.chat-widget-scene__composer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--feature-ui-space-2, 10px) var(--feature-ui-space-3, 12px);
  border-top: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
  color: var(--color-text-muted);
  font-size: 11px;
}
.chat-widget-scene__composer svg {
  box-sizing: content-box;
  padding: var(--feature-ui-space-1, 5px);
  border-radius: var(--feature-ui-radius-control, 7px);
  background: var(--color-accent-mint-soft);
  color: var(--color-text-primary);
}
.chat-widget-scene__launcher {
  position: absolute;
  display: grid;
  place-items: center;
  left: 32px;
  bottom: 21px;
  width: 32px;
  height: 32px;
  border-radius: var(--feature-ui-radius-card, 11px);
  background: linear-gradient(
    135deg,
    var(--color-accent-lime),
    var(--color-accent-mint)
  );
  box-shadow: var(--feature-ui-card-shadow, var(--shadow-card));
}
.chat-widget-scene__appearance-body {
  padding: var(--feature-ui-space-6, 24px) var(--feature-ui-space-5, 19px);
}
.chat-widget-scene__modes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--feature-ui-space-3, 14px);
}
.chat-widget-scene__mode > strong {
  display: block;
  margin-top: 14px;
  text-align: center;
  font-size: 14px;
}
.chat-widget-scene__mode > small {
  display: block;
  margin-top: 3px;
  text-align: center;
  font-size: 10px;
}
.chat-widget-scene__mini-site {
  position: relative;
  height: 168px;
  overflow: hidden;
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 10px);
  background: var(--color-surface-subtle);
}
.chat-widget-scene__mini-nav {
  display: flex;
  gap: 3px;
  padding: var(--feature-ui-space-2, 8px);
  border-bottom: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
  background: var(--color-surface-white);
}
.chat-widget-scene__mini-nav i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-border-default);
}
.chat-widget-scene__mini-title,
.chat-widget-scene__mini-line {
  display: block;
  width: 61%;
  height: 6px;
  margin: 18px 10px 0;
  border-radius: var(--feature-ui-radius-card, 3px);
  background: var(--color-border-default);
}
.chat-widget-scene__mini-line {
  width: 40%;
  height: 4px;
  margin-top: 6px;
  background: var(--color-border-subtle);
}
.chat-widget-scene__mini-tiles {
  display: flex;
  gap: var(--feature-ui-space-2, 7px);
  margin: 13px 10px;
}
.chat-widget-scene__mini-tiles i {
  width: 46px;
  height: 47px;
  border-radius: var(--feature-ui-radius-card, 5px);
  background: var(--color-accent-mint-soft);
}
.chat-widget-scene__mini-tiles i + i {
  background: var(--color-accent-peach-soft);
}
.chat-widget-scene__mini-chat {
  position: absolute;
  right: 8px;
  bottom: 29px;
  width: 80px;
  height: 88px;
  padding: var(--feature-ui-space-2, 9px) var(--feature-ui-space-2, 7px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 7px);
  background: var(--color-surface-white);
  box-shadow: var(--feature-ui-card-shadow, var(--shadow-card));
}
.chat-widget-scene__mini-chat b {
  display: block;
  width: 37px;
  height: 5px;
  margin-bottom: 12px;
  border-radius: var(--feature-ui-radius-card, 2px);
  background: var(--color-text-secondary);
}
.chat-widget-scene__mini-chat > span {
  display: block;
  width: 45px;
  height: 14px;
  border-radius: var(--feature-ui-radius-card, 4px);
  background: var(--color-accent-mint-soft);
}
.chat-widget-scene__mini-chat > span + span {
  width: 52px;
  height: 17px;
  margin-top: 7px;
  background: var(--color-surface-subtle);
}
.chat-widget-scene__mini-chat > i {
  display: block;
  width: 100%;
  height: 5px;
  margin-top: 10px;
  border-radius: var(--feature-ui-radius-card, 3px);
  background: var(--color-border-subtle);
}
.chat-widget-scene__mini-launcher {
  position: absolute;
  display: grid;
  place-items: center;
  right: 9px;
  bottom: 7px;
  width: 17px;
  height: 17px;
  border-radius: var(--feature-ui-radius-card, 6px);
  background: var(--color-accent-mint);
}
.chat-widget-scene__mini-launcher svg {
  width: 11px;
  height: 11px;
}
.chat-widget-scene__mini-search {
  display: none;
}
.chat-widget-scene__mode--sidebar .chat-widget-scene__mini-chat {
  top: 21px;
  right: 0;
  bottom: 0;
  width: 83px;
  height: auto;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 0;
  padding-top: 17px;
}
.chat-widget-scene__mode--sidebar .chat-widget-scene__mini-chat > i {
  position: absolute;
  bottom: 10px;
  width: 65px;
}
.chat-widget-scene__mode--sidebar .chat-widget-scene__mini-launcher,
.chat-widget-scene__mode--search .chat-widget-scene__mini-launcher,
.chat-widget-scene__mode--search .chat-widget-scene__mini-chat {
  display: none;
}
.chat-widget-scene__mode--search .chat-widget-scene__mini-search {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 7px);
  left: 11px;
  right: 11px;
  top: 67px;
  padding: var(--feature-ui-space-2, 10px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-control, 9px);
  background: var(--color-surface-white);
  box-shadow: var(--feature-ui-card-shadow, var(--shadow-card));
}
.chat-widget-scene__mini-search svg {
  width: 13px;
  height: 13px;
}
.chat-widget-scene__mini-search > i {
  width: 58px;
  height: 4px;
  border-radius: var(--feature-ui-radius-control, 2px);
  background: var(--color-border-default);
}
.chat-widget-scene__brand-settings {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--feature-ui-space-4, 18px);
  margin-top: 25px;
  padding: var(--feature-ui-space-3, 14px) var(--feature-ui-space-2, 10px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 12px);
  background: linear-gradient(
    120deg,
    var(--color-surface-subtle),
    var(--color-surface-white)
  );
}
.chat-widget-scene__brand-settings > span {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 5px);
  font-size: 11px;
}
.chat-widget-scene__brand-settings svg {
  width: 13px;
  height: 13px;
}
.chat-widget-scene__palette i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-accent-mint);
}
.chat-widget-scene__palette i:nth-child(2) {
  background: var(--color-accent-lime);
}
.chat-widget-scene__palette i:nth-child(3) {
  background: var(--color-accent-peach);
}
.chat-widget-scene__greeting-body {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--feature-ui-space-3, 14px);
  padding: var(--feature-ui-space-5, 20px) var(--feature-ui-space-4, 18px);
  flex: 1;
}
.chat-widget-scene__arrival,
.chat-widget-scene__welcome {
  position: relative;
  padding: var(--feature-ui-space-3, 14px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--radius-card-compact);
  background: var(--color-page-background);
}
.chat-widget-scene__greeting-body > div > small {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 8px);
  color: var(--color-text-secondary);
  font-size: 12px;
}
.chat-widget-scene__greeting-body small b {
  color: var(--color-brand-green);
  font-variant-numeric: tabular-nums;
}
.chat-widget-scene__arrival-page {
  display: grid;
  gap: var(--feature-ui-space-2, 10px);
  margin-top: 28px;
}
.chat-widget-scene__arrival-page span {
  width: 80%;
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--color-border-subtle);
}
.chat-widget-scene__arrival-page span:first-child {
  width: 60%;
  height: 13px;
  background: var(--color-border-default);
}
.chat-widget-scene__nudge {
  display: flex;
  align-items: flex-start;
  gap: var(--feature-ui-space-2, 8px);
  margin-top: 35px;
  padding: var(--feature-ui-space-3, 12px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 12px)
    var(--feature-ui-radius-card, 12px) var(--feature-ui-radius-tail, 3px)
    var(--feature-ui-radius-card, 12px);
  background: var(--color-surface-white);
  box-shadow: var(--feature-ui-card-shadow, var(--shadow-input));
  font-size: 12px;
  line-height: 1.7;
}
.chat-widget-scene__nudge svg {
  width: 16px;
  margin-top: 2px;
  color: var(--color-brand-green);
}
.chat-widget-scene__arrival-launcher {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 10px 0 0 auto;
  border-radius: var(--radius-pill);
  background: var(--color-accent-lime);
}
.chat-widget-scene__welcome-window {
  margin-top: 14px;
  padding: var(--feature-ui-space-3, 13px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--radius-card-compact);
  background: var(--color-surface-white);
  box-shadow: var(--feature-ui-card-shadow, var(--shadow-input));
}
.chat-widget-scene__welcome-window > strong {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 7px);
  padding-bottom: 12px;
  border-bottom: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
  font-size: 12px;
}
.chat-widget-scene__welcome-window > p {
  margin-top: 13px;
  padding: var(--feature-ui-space-3, 11px);
  border-radius: var(--feature-ui-radius-card, 10px)
    var(--feature-ui-radius-card, 10px) var(--feature-ui-radius-card, 10px)
    var(--feature-ui-radius-tail, 3px);
  background: var(--color-accent-mint-soft);
  font-size: 12px;
  line-height: 1.7;
}
.chat-widget-scene__welcome-actions {
  display: grid;
  gap: var(--feature-ui-space-2, 7px);
  margin-top: 12px;
}
.chat-widget-scene__welcome-actions > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--feature-ui-space-1, 6px) var(--feature-ui-space-2, 9px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-control, 8px);
  font-size: 12px;
}
.chat-widget-scene__welcome-actions svg {
  width: 14px;
  height: 14px;
}
.chat-widget-scene__preferences-body {
  padding: var(--feature-ui-space-4, 18px);
}
.chat-widget-scene__language-setting {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 10px);
  padding: var(--feature-ui-space-3, 14px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--radius-card-compact);
  background: var(--color-page-background);
}
.chat-widget-scene__language-setting > svg {
  color: var(--color-brand-green);
}
.chat-widget-scene__language-setting > div {
  display: grid;
  gap: var(--feature-ui-space-1, 4px);
}
.chat-widget-scene__language-setting > span {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 5px);
  margin-left: auto;
  color: var(--color-brand-green);
  font-size: 11px;
}
.chat-widget-scene__language-setting > span svg {
  width: 13px;
  height: 13px;
}
.chat-widget-scene__behavior-settings {
  display: grid;
  gap: var(--feature-ui-space-2, 8px);
  margin-top: 14px;
}
.chat-widget-scene__behavior-settings > div {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 10px);
  padding: var(--feature-ui-space-2, 10px) var(--feature-ui-space-3, 14px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--radius-card-compact);
  background: var(--color-surface-white);
}
.chat-widget-scene__behavior-settings > div > div {
  display: grid;
  gap: 2px;
  flex: 1;
}
.chat-widget-scene__behavior-settings strong {
  font-size: 13px;
}
.chat-widget-scene__switch {
  position: relative;
  width: 32px;
  height: 18px;
  border-radius: var(--radius-pill);
  background: var(--color-border-default);
}
.chat-widget-scene__switch i {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-white);
}
.chat-widget-scene__switch--on {
  background: var(--color-brand-green);
}
.chat-widget-scene__switch--on i {
  left: 16px;
}
.chat-widget-scene__setting-state {
  color: var(--color-text-muted);
  font-size: 11px;
}
.chat-widget-scene__identity-body {
  display: grid;
  grid-template-columns: 163px 32px minmax(0, 1fr);
  padding: var(--feature-ui-space-5, 21px) var(--feature-ui-space-4, 18px);
}
.chat-widget-scene__profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: start;
  padding: var(--feature-ui-space-4, 16px) var(--feature-ui-space-3, 12px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 13px);
  background: linear-gradient(
    165deg,
    var(--color-surface-white),
    var(--color-accent-mint-soft)
  );
}
.chat-widget-scene__avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 14px 0 9px;
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: 15px;
  background: var(--color-surface-white);
  font-size: 16px;
}
.chat-widget-scene__profile > strong {
  font-size: 14px;
}
.chat-widget-scene__verified {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 5px);
  margin-top: 12px;
  padding: var(--feature-ui-space-1, 5px) var(--feature-ui-space-2, 8px);
  border-radius: var(--feature-ui-radius-card, 6px);
  background: var(--color-surface-white);
  font-size: 10px;
}
.chat-widget-scene__verified svg {
  width: 12px;
  height: 12px;
}
.chat-widget-scene__history {
  display: grid;
  gap: var(--feature-ui-space-2, 9px);
  width: 100%;
  margin-top: 18px;
  padding-top: 13px;
  border-top: 1px solid
    var(--feature-ui-divider-color, var(--color-border-default));
}
.chat-widget-scene__history > span {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 6px);
  font-size: 11px;
}
.chat-widget-scene__history svg {
  width: 13px;
  height: 13px;
}
.chat-widget-scene__identity-bridge {
  display: grid;
  place-items: center;
  color: var(--color-text-muted);
}
.chat-widget-scene__identity-bridge svg {
  width: 20px;
}
.chat-widget-scene__inbox {
  min-width: 0;
  padding: var(--feature-ui-space-3, 13px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 13px);
}
.chat-widget-scene__inbox-title {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 6px);
  padding-bottom: 10px;
  border-bottom: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
}
.chat-widget-scene__inbox-person {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--feature-ui-space-2, 8px);
  margin: 11px 0;
}
.chat-widget-scene__inbox-person small {
  font-size: 10px;
}
.chat-widget-scene__context {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 5px);
  margin-top: 11px;
  color: var(--color-text-muted);
  font-size: 10px;
}
.chat-widget-scene__context svg {
  width: 13px;
  height: 13px;
}
.chat-widget-scene__inbox .chat-widget-scene__answer {
  padding: var(--feature-ui-space-2, 10px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 10px)
    var(--feature-ui-radius-card, 10px) var(--feature-ui-radius-card, 10px)
    var(--feature-ui-radius-tail, 2px);
  background: var(--color-accent-mint-soft);
}
.chat-widget-scene__owner {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-1, 6px);
  margin-top: 13px;
  padding-top: 10px;
  border-top: 1px dashed var(--color-border-default);
  color: var(--color-text-muted);
  font-size: 11px;
}
.chat-widget-scene__owner svg:last-child {
  margin-left: auto;
  width: 14px;
  height: 14px;
}
.chat-widget-scene__conversation-body {
  padding: var(--feature-ui-space-4, 18px) var(--feature-ui-space-5, 20px);
}
.chat-widget-scene__attachments {
  margin-top: 13px;
}
.chat-widget-scene__attachments > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--feature-ui-space-3, 11px);
  margin-top: 6px;
}
.chat-widget-scene__attachment {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 9px);
  padding: var(--feature-ui-space-2, 10px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 11px);
  background: var(--color-surface-subtle);
}
.chat-widget-scene__attachment > span {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 32px;
  height: 36px;
  border-radius: var(--feature-ui-radius-card, 7px);
  background: var(--color-accent-mint-soft);
}
.chat-widget-scene__attachment:nth-child(2) > span {
  background: var(--color-accent-peach-soft);
}
.chat-widget-scene__attachment > div {
  display: grid;
  gap: 1px;
}
.chat-widget-scene__attachment strong {
  font-size: 12px;
}
.chat-widget-scene__attachment small {
  font-size: 10px;
}
.chat-widget-scene__attachment > svg {
  width: 13px;
  height: 13px;
  margin-left: auto;
  color: var(--color-text-muted);
}
.chat-widget-scene__service-reply {
  margin-top: 14px;
  padding: var(--feature-ui-space-3, 13px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 11px);
}
.chat-widget-scene__service-reply > strong {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 7px);
  font-size: 12px;
}
.chat-widget-scene__service-reply > p {
  margin-top: 9px;
  font-size: 12px;
}
.chat-widget-scene__service-reply .chat-widget-scene__source {
  padding-top: 9px;
  border-top: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
}
.chat-widget-scene__service-reply .chat-widget-scene__source svg:last-child {
  margin-left: auto;
}
.chat-widget-scene__feedback {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--feature-ui-space-2, 10px);
  margin-top: 14px;
  padding: var(--feature-ui-space-3, 11px) var(--feature-ui-space-3, 13px);
  border-radius: var(--feature-ui-radius-card, 11px);
  background: linear-gradient(
    100deg,
    var(--color-accent-lime-soft),
    var(--color-accent-mint-soft)
  );
}
.chat-widget-scene__feedback > div {
  display: grid;
  gap: 3px;
}
.chat-widget-scene__feedback strong {
  font-size: 12px;
}
.chat-widget-scene__feedback small {
  font-size: 10px;
}
.chat-widget-scene__feedback > span {
  display: flex;
  gap: var(--feature-ui-space-1, 5px);
}
.chat-widget-scene__feedback svg {
  width: 17px;
  height: 17px;
}
.chat-widget-scene__new-chat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--feature-ui-space-1, 5px);
  margin-top: 12px;
  color: var(--color-text-muted);
  font-size: 11px;
}
.chat-widget-scene__new-chat svg {
  width: 14px;
  height: 14px;
}

.specialty-page {
  --specialty-accent: var(--color-accent-lime-soft);
  width: 100%;
}
.specialty-page--mint {
  --specialty-accent: var(--color-accent-mint-soft);
}
.specialty-page--peach {
  --specialty-accent: var(--color-accent-peach-soft);
}
.specialty-page--lavender {
  --specialty-accent: var(--color-accent-lavender-soft);
}
.specialty-page--sky {
  --specialty-accent: var(--color-accent-sky-soft);
}
.specialty-page--butter {
  --specialty-accent: var(--color-accent-butter-soft);
}
.specialty-page :is(section, figure, div) {
  min-width: 0;
}
.specialty-hero {
  padding-top: 34px;
}
.specialty-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: var(--font-caption);
  color: var(--color-text-muted);
  margin-bottom: 46px;
}
.specialty-breadcrumb a {
  padding-block: 6px;
}
.specialty-breadcrumb a:hover {
  color: var(--color-text-primary);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.specialty-hero__layout,
.specialty-detail__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 64px;
}
.specialty-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  font-size: var(--font-body-small);
}
.specialty-kicker svg {
  box-sizing: content-box;
  padding: 9px;
  background: var(--specialty-accent);
  border-radius: 13px;
}
.specialty-hero__copy h1 {
  font-size: var(--font-heading-one);
  line-height: var(--line-height-heading);
  max-width: 100%;
}
.specialty-hero__copy > p,
.specialty-detail__copy > p {
  margin-top: 24px;
  font-size: var(--font-body-large);
  line-height: 1.8;
  color: var(--color-text-secondary);
}
.specialty-points {
  display: grid;
  gap: 16px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--font-body-small);
  line-height: 1.75;
  color: var(--color-text-secondary);
}
.specialty-points li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.specialty-points svg {
  flex: 0 0 18px;
  margin-top: 4px;
}
.specialty-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px 28px;
  margin-top: 32px;
}
.specialty-inline-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: var(--font-body-small);
}
.specialty-inline-link:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}
.specialty-hero__visual.product-demo-stage {
  padding: 24px;
  container-type: inline-size;
  background-image: radial-gradient(
    ellipse at top left,
    rgba(255, 255, 255, 0.64),
    transparent 72%
  );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.specialty-hero__visual .feature-illustration {
  width: 560px;
  zoom: tan(atan2(100cqw, 560px));
}
.specialty-details {
  scroll-margin-top: calc(var(--site-header-height) + 24px);
}
.specialty-detail--reverse .specialty-detail__copy {
  order: 2;
}
.specialty-detail__copy h2 {
  font-size: var(--font-heading-two);
}
.specialty-detail__visual {
  margin: 0;
  padding: 24px;
  border-radius: var(--radius-panel);
  background:
    radial-gradient(
      ellipse at top left,
      rgba(255, 255, 255, 0.8),
      transparent 75%
    ),
    var(--specialty-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  container-type: inline-size;
}
.specialty-detail__canvas {
  width: 560px;
  zoom: tan(atan2(100cqw, 560px));
}
.specialty-detail__visual figcaption {
  margin-top: 14px;
  font-size: var(--font-caption);
  line-height: 1.6;
  color: var(--color-text-secondary);
}
.specialty-scenario__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.specialty-scenario__steps:has(> li:last-child:nth-child(3)) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.specialty-scenario__steps li {
  position: relative;
  border-top: 1px solid var(--color-border-default);
  padding-top: 24px;
}
.specialty-scenario__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--specialty-accent);
  font-size: var(--font-body-small);
  font-weight: 600;
  margin-bottom: 24px;
}
.specialty-scenario__steps h3 {
  font-size: var(--font-heading-four);
}
.specialty-scenario__steps p {
  margin-top: 14px;
  color: var(--color-text-secondary);
  font-size: var(--font-body-small);
  line-height: 1.8;
}
.specialty-faq__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: 80px;
  align-items: start;
}
.specialty-faq .product-heading {
  margin: 0;
}
.specialty-faq__items {
  display: grid;
  gap: 10px;
}
.specialty-related {
  padding-bottom: 0;
}
.specialty-related__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 28px;
}
.specialty-related__heading h2 {
  font-size: var(--font-heading-three);
}
.specialty-related__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.specialty-related__links > a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 24px 0;
  border-top: 1px solid var(--color-border-default);
  transition: border-color var(--duration-ui);
}
.specialty-related__links > a:hover {
  border-color: var(--color-text-primary);
}
.specialty-related__links h3 {
  font-size: var(--font-heading-four);
}
.specialty-related__links p {
  margin-top: 10px;
  font-size: var(--font-body-small);
  color: var(--color-text-secondary);
}
.specialty-cta {
  padding-bottom: 0;
}
@media (prefers-reduced-motion: reduce) {
  .specialty-page *,
  .specialty-page *::after {
    transition: none !important;
  }
}
@media (min-width: 810px) and (max-width: 1199.98px) {
  .specialty-hero__layout,
  .specialty-detail__layout {
    gap: 32px;
  }
  .specialty-hero__copy h1 {
    font-size: var(--font-heading-one);
  }
  .specialty-hero__visual.product-demo-stage,
  .specialty-detail__visual {
    padding: 18px;
  }
  .specialty-faq__layout {
    gap: 40px;
  }
  .specialty-scenario__steps {
    gap: 20px;
  }
}
@media (max-width: 809.98px) {
  .specialty-hero {
    padding-top: 24px;
  }
  .specialty-breadcrumb {
    font-size: var(--font-caption);
    margin-bottom: 28px;
    gap: 8px;
  }
  .specialty-hero__layout,
  .specialty-detail__layout,
  .specialty-faq__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-content-gap);
  }
  .specialty-kicker {
    font-size: var(--font-body-small);
    margin-bottom: 18px;
  }
  .specialty-kicker svg {
    width: 20px;
    height: 20px;
    padding: 8px;
  }
  .specialty-hero__copy h1 {
    font-size: var(--font-heading-one);
  }
  .specialty-hero__copy > p,
  .specialty-detail__copy > p {
    margin-top: var(--space-heading-gap);
    font-size: var(--font-body-large);
    line-height: 1.7;
  }
  .specialty-points {
    margin-top: 20px;
    gap: 12px;
    font-size: var(--font-body);
  }
  .specialty-actions {
    margin-top: 24px;
    gap: 12px 22px;
  }
  .specialty-hero__visual.product-demo-stage,
  .specialty-detail__visual {
    padding: 14px;
    border-radius: var(--radius-card);
  }
  .specialty-detail--reverse .specialty-detail__copy {
    order: 0;
  }
  .specialty-detail__copy .product-eyebrow {
    margin-bottom: 12px;
  }
  .specialty-detail__visual figcaption {
    font-size: var(--font-caption);
    margin-top: 10px;
  }
  .specialty-scenario__steps,
  .specialty-scenario__steps:has(> li:last-child:nth-child(3)) {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .specialty-scenario__steps li {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    column-gap: 16px;
    padding-top: 20px;
  }
  .specialty-scenario__number {
    grid-row: span 2;
    width: 36px;
    height: 36px;
    font-size: var(--font-caption);
    margin: 0;
  }
  .specialty-scenario__steps h3 {
    font-size: var(--font-heading-four);
    padding-top: 5px;
  }
  .specialty-scenario__steps p {
    grid-column: 2;
    margin-top: 10px;
    font-size: var(--font-body);
    line-height: 1.7;
  }
  .specialty-related__heading {
    gap: 10px;
    margin-bottom: 16px;
  }
  .specialty-related__links {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .specialty-related__links > a {
    padding-block: 20px;
  }
  .specialty-related__links h3 {
    font-size: var(--font-heading-four);
  }
  .specialty-related__links p {
    font-size: var(--font-body);
  }
}
.brand-widget {
  background: var(--color-page-background);
}
.brand-widget__intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  margin-bottom: 32px;
}
.brand-widget__intro .product-heading {
  max-width: 720px;
  margin-bottom: 0;
}
.brand-widget__intro .product-button {
  flex-shrink: 0;
  margin-bottom: 3px;
}
.brand-widget__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  gap: 8px;
}
.brand-widget__studio {
  display: grid;
  grid-template-columns: 304px minmax(0, 1fr);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-panel, var(--radius-panel));
  overflow: hidden;
  background: var(--color-surface-white);
  box-shadow: var(--feature-ui-panel-shadow, var(--shadow-card));
}
.brand-widget__controls {
  padding: var(--feature-ui-space-6, 24px) var(--feature-ui-space-5, 20px)
    var(--feature-ui-space-5, 20px);
  border-right: 1px solid
    var(--feature-ui-divider-color, var(--color-border-subtle));
}
.brand-widget__panel-title {
  display: flex;
  align-items: center;
  gap: var(--feature-ui-space-2, 9px);
  margin-bottom: 16px;
  font-size: var(--font-body);
}
.brand-widget__panel-title > svg {
  color: var(--color-text-muted);
}
.brand-widget__tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--feature-ui-space-2, 4px);
  margin-bottom: 16px;
  padding: var(--feature-ui-space-1, 4px);
  background: var(--color-surface-subtle);
  border-radius: var(--radius-control);
}
.brand-widget__tabs button {
  min-height: var(--control-target);
  padding: var(--feature-ui-space-2, 8px);
  border: 1px solid transparent;
  border-radius: var(--radius-icon);
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--font-body-small);
  font-weight: 500;
  transition:
    background-color var(--duration-ui),
    color var(--duration-ui);
}
.brand-widget__tabs button[aria-selected="true"] {
  background: var(--color-surface-white);
  color: var(--color-text-primary);
  box-shadow: var(--feature-ui-control-shadow, var(--shadow-input));
}
.brand-widget__tabs button:hover {
  color: var(--color-text-primary);
}
.brand-widget__settings-panel[hidden] {
  display: none;
}
.brand-widget__settings-panel--experience {
  display: grid;
  gap: var(--feature-ui-space-4, 16px);
}
.brand-widget__settings-panel--experience .brand-widget__field {
  margin: 0;
}
.brand-widget__setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--feature-ui-space-3, 12px);
}
.brand-widget__setting-row > div {
  min-width: 0;
}
.brand-widget__setting-row strong {
  font-size: var(--font-body-small);
  font-weight: 500;
}
.brand-widget__setting-row p,
.brand-widget__field-note {
  margin: 5px 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-caption);
  line-height: 1.65;
}
.brand-widget__switch {
  flex: 0 0 var(--control-target);
  position: relative;
  min-height: var(--control-target);
  padding: 0;
  border: 0;
  border-radius: var(--radius-icon);
  background: transparent;
}
.brand-widget__switch::before {
  content: "";
  position: absolute;
  width: 34px;
  height: 20px;
  top: 12px;
  left: 5px;
  border-radius: var(--radius-pill);
  background: var(--color-border-default);
  transition: background-color var(--duration-ui);
}
.brand-widget__switch > span {
  position: absolute;
  width: 16px;
  height: 16px;
  left: 7px;
  top: 14px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-white);
  box-shadow: var(--feature-ui-control-shadow, var(--shadow-input));
  transition: transform var(--duration-ui);
}
.brand-widget__switch[aria-checked="true"]::before {
  background: var(--color-brand-green);
}
.brand-widget__switch[aria-checked="true"] > span {
  transform: translateX(14px);
}
.brand-widget__switch:hover::before {
  filter: brightness(0.95);
}
.brand-widget__field {
  padding: 0;
  margin: 0 0 16px;
  border: 0;
  min-width: 0;
}
.brand-widget__field :is(legend, label) {
  display: block;
  width: 100%;
  margin-bottom: 8px;
  padding: 0;
  font-size: var(--font-body-small);
  font-weight: 500;
}
.brand-widget__field legend > span {
  float: right;
  font-size: var(--font-caption);
  font-weight: 400;
  color: var(--color-text-muted);
}
.brand-widget__themes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--feature-ui-space-2, 8px);
}
.brand-widget__theme {
  min-width: 0;
  display: grid;
  gap: var(--feature-ui-space-1, 6px);
  padding: var(--feature-ui-space-1, 6px) var(--feature-ui-space-1, 4px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 12px);
  background: var(--color-surface-white);
  transition:
    border-color var(--duration-ui),
    background-color var(--duration-ui);
}
.brand-widget__theme > span:last-child {
  font-size: var(--font-body-small);
}
.brand-widget__theme[aria-pressed="true"] {
  background: var(--color-surface-subtle);
  border-color: var(--color-text-primary);
  box-shadow: inset 0 0 0 0.5px var(--color-text-primary);
}
.brand-widget__theme:hover {
  border-color: var(--color-text-muted);
}
.brand-widget__theme-sample {
  height: 32px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--feature-ui-space-1, 5px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-card, 5px);
  background: var(--color-page-background);
}
.brand-widget__theme-sample i {
  width: 65%;
  height: 4px;
  background: var(--color-border-default);
  border-radius: var(--feature-ui-radius-card, 3px);
}
.brand-widget__theme-sample i:nth-child(2) {
  align-self: flex-end;
  width: 50%;
  height: 6px;
  background: var(--widget-accent);
}
.brand-widget__theme-sample i:last-child {
  width: 75%;
}
.brand-widget__theme--glass .brand-widget__theme-sample {
  background: linear-gradient(
    140deg,
    var(--color-text-muted),
    var(--color-surface-inverse)
  );
  border-color: var(--color-surface-inverse);
}
.brand-widget__theme--sunrise .brand-widget__theme-sample {
  background: var(--color-accent-peach-soft);
}
.brand-widget__theme--terminal .brand-widget__theme-sample {
  background: var(--color-surface-inverse);
  border-radius: var(--feature-ui-radius-card, 1px);
}
.brand-widget__theme--terminal .brand-widget__theme-sample i {
  background: var(--widget-accent);
  height: 2px;
  border-radius: 0;
}
.brand-widget__swatches {
  display: flex;
  align-items: center;
  gap: 8px;
}
.brand-widget__swatches button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  padding: 5px;
  transition: border-color var(--duration-ui);
}
.brand-widget__swatches button > span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: inset 0 0 0 1px rgba(14, 35, 23, 0.07);
}
.brand-widget__swatches button[aria-pressed="true"] {
  border-color: var(--color-text-primary);
}
.brand-widget__swatches button:hover {
  background: var(--color-surface-subtle);
}
.brand-widget__field :is(input, textarea) {
  width: 100%;
  min-height: var(--control-target);
  padding: var(--feature-ui-space-2, 9px) var(--feature-ui-space-3, 12px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--radius-control);
  font: inherit;
  font-size: var(--font-control);
  color: var(--color-text-primary);
  background: var(--color-page-background);
}
.brand-widget__field textarea {
  display: block;
  resize: vertical;
  min-height: 84px;
  max-height: 180px;
  line-height: 1.65;
}
.brand-widget__positions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--feature-ui-space-2, 8px);
}
.brand-widget__positions button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--feature-ui-space-2, 9px);
  min-height: 44px;
  padding: var(--feature-ui-space-2, 9px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--feature-ui-radius-control, 10px);
  background: var(--color-surface-white);
  font-size: var(--font-body-small);
  transition:
    background-color var(--duration-ui),
    border-color var(--duration-ui);
}
.brand-widget__positions button[aria-pressed="true"] {
  background: var(--color-surface-subtle);
  border-color: var(--color-text-primary);
}
.brand-widget__hint {
  display: flex;
  gap: 7px;
  align-items: center;
  padding-top: 3px;
  margin-top: 16px;
  color: var(--color-text-muted);
  font-size: var(--font-caption);
}
.brand-widget__hint > span,
.brand-widget__live-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-status-success);
  flex-shrink: 0;
}
.brand-widget__entry-examples {
  margin-top: 16px;
}
.brand-widget__entry-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--feature-ui-space-2, 8px);
}
.brand-widget__entry-example {
  display: grid;
  gap: var(--feature-ui-space-2, 8px);
  min-width: 0;
  padding: var(--feature-ui-space-2, 8px);
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--radius-icon);
  background: var(--color-page-background);
  text-align: left;
  transition:
    border-color var(--duration-ui),
    background-color var(--duration-ui);
}
.brand-widget__entry-example:hover,
.brand-widget__entry-example[aria-pressed="true"] {
  border-color: var(--color-brand-green);
  background: var(--color-surface-subtle);
}
.brand-widget__entry-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  font-size: var(--font-caption);
  font-weight: 500;
}
.brand-widget__entry-label > svg {
  color: var(--color-text-muted);
  flex-shrink: 0;
}
.brand-widget__entry-sample {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 30px;
  padding: 4px;
  font-size: var(--font-caption);
  white-space: nowrap;
}
.brand-widget__entry-sample > svg {
  flex-shrink: 0;
}
.brand-widget__entry-sample--button {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-pill);
  background: var(--color-surface-white);
  color: var(--color-text-primary);
  transition:
    border-color var(--duration-ui),
    background-color var(--duration-ui),
    color var(--duration-ui);
}
.brand-widget__entry-example[aria-pressed="true"]
  .brand-widget__entry-sample--button {
  border-color: var(--color-surface-inverse);
  background: var(--color-surface-inverse);
  color: var(--color-surface-white);
}
.brand-widget__entry-sample--search {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-icon);
  background: var(--color-surface-white);
  color: var(--color-text-muted);
}
.brand-widget__preview {
  min-width: 0;
  padding: 20px 24px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    radial-gradient(
      ellipse at 95% 5%,
      color-mix(in srgb, var(--widget-accent) 36%, transparent),
      transparent 60%
    ),
    linear-gradient(
      145deg,
      var(--color-page-background),
      var(--color-surface-subtle)
    );
  transition: background-color var(--duration-ui);
}
.brand-widget__preview-caption {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: "label steps badge";
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  font-size: var(--font-caption);
  color: var(--color-text-muted);
}
.brand-widget__preview-caption > span:first-child {
  grid-area: label;
  display: flex;
  align-items: center;
  gap: 7px;
}
.brand-widget__preview-caption > span:last-child {
  grid-area: badge;
  justify-self: end;
  border: 1px solid var(--color-border-subtle);
  background: var(--glass-surface);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 10px;
}
.brand-widget__preview-steps {
  grid-area: steps;
  display: flex;
  gap: var(--feature-ui-space-1, 4px);
  padding: var(--feature-ui-space-1, 4px);
  margin: 0;
  border: 1px solid var(--feature-ui-border-color, var(--color-border-subtle));
  border-radius: var(--radius-control);
  background: var(--glass-surface);
}
.brand-widget__preview-steps button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--feature-ui-space-2, 8px);
  min-height: var(--control-target);
  padding: var(--feature-ui-space-2, 8px) var(--feature-ui-space-3, 12px);
  border: 0;
  border-radius: var(--radius-icon);
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--font-body-small);
  white-space: nowrap;
  transition:
    background-color var(--duration-ui),
    color var(--duration-ui);
}
.brand-widget__preview-steps button > span {
  font-size: var(--font-caption);
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}
.brand-widget__preview-steps button[aria-pressed="true"] {
  color: var(--color-surface-white);
  background: var(--color-surface-inverse);
}
.brand-widget__preview-steps button:hover:not([aria-pressed="true"]) {
  background: var(--color-surface-subtle);
  color: var(--color-text-primary);
}
.brand-widget__viewport {
  width: 100%;
  max-width: 740px;
  margin-inline: auto;
  container-type: inline-size;
}
.brand-widget__canvas {
  width: 680px;
  height: 520px;
  position: relative;
  zoom: tan(atan2(100cqw, 680px));
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--color-border-subtle);
  box-shadow: 0 10px 30px rgba(14, 35, 23, 0.07);
  background: var(--color-surface-white);
  color: var(--color-text-primary);
  isolation: isolate;
}
.brand-widget__browser {
  position: relative;
  z-index: 1;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 13px;
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-page-background);
  color: var(--color-text-muted);
  font-size: 10px;
}
.brand-widget__browser > span:nth-child(2) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 3px 50px;
  background: var(--color-surface-white);
  border-radius: 5px;
}
.brand-widget__browser-dots {
  display: flex;
  gap: 4px;
}
.brand-widget__browser-dots i {
  width: 5px;
  height: 5px;
  background: var(--color-border-default);
  border-radius: 50%;
}
.brand-widget__website {
  position: absolute;
  inset: 34px 0 0;
  background:
    radial-gradient(
      ellipse at 90% 90%,
      color-mix(in srgb, var(--widget-accent) 35%, transparent),
      transparent 70%
    ),
    var(--color-page-background);
}
.brand-widget__store-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 52px;
  padding: 0 24px;
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: 11px;
}
.brand-widget__store-nav > strong {
  display: flex;
  gap: 7px;
  align-items: center;
  font-size: 12px;
  letter-spacing: 0.06em;
}
.brand-widget__store-nav > strong span {
  width: 13px;
  height: 13px;
  background: var(--widget-accent);
  border: 1px solid rgba(14, 35, 23, 0.1);
  border-radius: 4px;
  transform: rotate(-12deg);
}
.brand-widget__store-nav > span {
  margin-left: auto;
  font-size: 9px;
  color: var(--color-text-muted);
}
.brand-widget__store-copy {
  position: absolute;
  top: 88px;
  left: 30px;
}
.brand-widget__store-copy > span:first-child {
  display: block;
  font-size: 8px;
  letter-spacing: 0.13em;
  color: var(--color-text-muted);
  margin-bottom: 14px;
}
.brand-widget__store-copy > strong {
  display: block;
  font-size: 27px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -0.04em;
}
.brand-widget__store-copy > p {
  font-size: 10px;
  color: var(--color-text-muted);
  margin-top: 10px;
}
.brand-widget__store-button {
  display: flex;
  align-items: center;
  gap: 16px;
  width: max-content;
  margin-top: 17px;
  font-size: 9px;
  border-bottom: 1px solid var(--color-text-primary);
  padding-bottom: 4px;
}
.brand-widget__store-contact,
.brand-widget__store-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  min-height: 34px;
  padding: 8px 12px;
  margin-top: 17px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  line-height: 1.5;
}
.brand-widget__store-contact {
  background: var(--color-surface-inverse);
  color: var(--color-surface-white);
}
.brand-widget__store-search {
  width: 246px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-icon);
  background: var(--color-surface-white);
  color: var(--color-text-muted);
  box-shadow: var(--shadow-input);
}
.brand-widget__store-search > svg:last-child {
  margin-left: auto;
  color: var(--color-brand-green);
}
.brand-widget__store-art {
  position: absolute;
  bottom: 32px;
  left: 63px;
  width: 176px;
}
.brand-widget__store-art > svg {
  display: block;
  width: 100%;
}
.brand-widget__chat {
  --widget-chat-bg: var(--color-surface-white);
  --widget-chat-text: var(--color-text-primary);
  --widget-chat-muted: var(--color-text-muted);
  --widget-chat-border: var(--color-border-subtle);
  --widget-assistant-bg: var(--color-page-background);
  --widget-chat-radius: 19px;
  position: absolute;
  z-index: 2;
  top: 96px;
  right: 24px;
  width: 330px;
  border: 1px solid var(--widget-chat-border);
  border-radius: var(--widget-chat-radius);
  overflow: hidden;
  background: var(--widget-chat-bg);
  color: var(--widget-chat-text);
  box-shadow:
    0 8px 12px rgba(14, 35, 23, 0.04),
    0 20px 48px rgba(14, 35, 23, 0.16);
  transform: translateX(0);
  transition:
    transform 300ms cubic-bezier(0.22, 0.68, 0, 1),
    background-color 180ms,
    color 180ms,
    border-radius 180ms;
}
.brand-widget__canvas--left .brand-widget__chat {
  transform: translateX(-298px);
}
.brand-widget__chat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--widget-chat-border);
  background: linear-gradient(
    110deg,
    color-mix(in srgb, var(--widget-accent) 18%, transparent),
    transparent
  );
}
.brand-widget__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  flex-shrink: 0;
  background: linear-gradient(
    140deg,
    var(--widget-accent),
    color-mix(in srgb, var(--widget-accent), var(--color-accent-mint) 60%)
  );
  color: var(--color-text-primary);
}
.brand-widget__mark > i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
}
.brand-widget__chat-header > div {
  min-width: 0;
  flex: 1;
}
.brand-widget__chat-header strong {
  display: block;
  font-size: 13px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-widget__chat-header > div > span {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--widget-chat-muted);
  font-size: 9px;
  margin-top: 4px;
}
.brand-widget__chat-header i:not(.brand-widget__mark i) {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-status-success);
}
.brand-widget__chat-more {
  align-self: flex-start;
  color: var(--widget-chat-muted);
}
.brand-widget__chat-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 13px;
  padding: 13px 18px 16px;
  min-height: 218px;
}
.brand-widget__chat-time {
  align-self: center;
  color: var(--widget-chat-muted);
  font-size: 8px;
}
.brand-widget__bubble {
  max-width: 94%;
  border-radius: 12px 12px 12px 3px;
  font-size: 11px;
  line-height: 1.7;
  padding: 10px 12px;
  border: 1px solid var(--widget-chat-border);
  background: var(--widget-assistant-bg);
}
.brand-widget__bubble--customer {
  align-self: flex-end;
  background: var(--widget-accent);
  border-color: transparent;
  color: var(--color-text-primary);
  border-radius: 12px 12px 3px 12px;
}
.brand-widget__quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
}
.brand-widget__quick-actions > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 9px;
  border: 1px solid var(--widget-chat-border);
  border-radius: 8px;
  font-size: 10px;
}
.brand-widget__source {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  color: var(--widget-chat-muted);
}
.brand-widget__greeting {
  position: absolute;
  right: 24px;
  bottom: 66px;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 240px;
  padding: 12px 14px;
  border: 1px solid var(--color-border-subtle);
  border-radius: 16px 16px 4px 16px;
  background: var(--color-surface-white);
  box-shadow: var(--shadow-card-hover);
  transition: transform 300ms cubic-bezier(0.22, 0.68, 0, 1);
}
.brand-widget__greeting > div {
  flex: 1;
  min-width: 0;
}
.brand-widget__greeting strong {
  display: block;
  max-width: 190px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
  line-height: 1.35;
  margin-bottom: 3px;
}
.brand-widget__greeting-text {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}
.brand-widget__greeting-text > span {
  font-size: 14px;
  line-height: 1;
  vertical-align: -1px;
}
.brand-widget__canvas--left .brand-widget__greeting {
  transform: translateX(-388px);
}
.brand-widget__composer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 14px;
  padding: 9px 10px;
  border: 1px solid var(--widget-chat-border);
  border-radius: 10px;
  color: var(--widget-chat-muted);
  font-size: 10px;
}
.brand-widget__composer > span:last-child {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 8px;
  background: var(--widget-accent);
  color: var(--color-text-primary);
}
.brand-widget__chat-credit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--widget-chat-muted);
  font-size: 7px;
  padding: 9px;
}
.brand-widget__launcher {
  position: absolute;
  z-index: 2;
  right: 24px;
  bottom: 13px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--widget-accent);
  box-shadow: 0 4px 10px rgba(14, 35, 23, 0.13);
  transition:
    transform 300ms cubic-bezier(0.22, 0.68, 0, 1),
    background-color 180ms;
}
.brand-widget__canvas--left .brand-widget__launcher {
  transform: translateX(-588px);
}
.brand-widget__canvas--glass .brand-widget__chat {
  --widget-chat-bg: rgba(23, 32, 29, 0.91);
  --widget-chat-text: #f8fcf9;
  --widget-chat-muted: #bdccc4;
  --widget-chat-border: rgba(220, 235, 225, 0.17);
  --widget-assistant-bg: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.brand-widget__canvas--sunrise .brand-widget__chat {
  --widget-chat-bg: #fffaf7;
  --widget-assistant-bg: #fff0e6;
  --widget-chat-border: #eddfd5;
  --widget-chat-radius: 25px;
}
.brand-widget__canvas--sunrise .brand-widget__chat-header {
  background: linear-gradient(
    120deg,
    var(--color-accent-peach-soft),
    color-mix(in srgb, var(--widget-accent) 24%, var(--color-surface-white))
  );
}
.brand-widget__canvas--terminal .brand-widget__chat {
  --widget-chat-bg: var(--color-surface-inverse);
  --widget-chat-text: #ecf6ed;
  --widget-chat-muted: #acc0ad;
  --widget-chat-border: #38473b;
  --widget-assistant-bg: transparent;
  --widget-chat-radius: 5px;
  font-family: ui-monospace, SFMono-Regular, Consolas, "PingFang SC", monospace;
}
.brand-widget__canvas--terminal
  :is(
    .brand-widget__bubble,
    .brand-widget__composer,
    .brand-widget__quick-actions > span,
    .brand-widget__mark,
    .brand-widget__composer > span:last-child
  ) {
  border-radius: 3px;
}
.brand-widget__canvas--terminal .brand-widget__bubble--assistant {
  border-color: transparent;
  padding-left: 0;
}
.brand-widget__canvas--terminal .brand-widget__bubble--assistant::before {
  content: "> ";
  color: var(--widget-accent);
}
.brand-widget__preview-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 20px;
  color: var(--color-text-muted);
  font-size: 11px;
  margin-top: 12px;
}
.brand-widget__preview-footer > span {
  display: flex;
  align-items: center;
  gap: 5px;
}
@media (prefers-reduced-motion: reduce) {
  .brand-widget *,
  .brand-widget *::before {
    transition: none !important;
  }
}
@media (min-width: 810px) and (max-width: 1199.98px) {
  .brand-widget__intro {
    gap: 32px;
  }
  .brand-widget__intro .product-heading {
    max-width: 580px;
  }
  .brand-widget__studio {
    grid-template-columns: 288px minmax(0, 1fr);
  }
  .brand-widget__controls {
    padding: 20px 16px;
  }
  .brand-widget__preview {
    padding: 20px 16px;
  }
  .brand-widget__preview-caption {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "label badge"
      "steps steps";
  }
  .brand-widget__preview-steps {
    justify-self: center;
  }
  .brand-widget__swatches {
    gap: 8px;
  }
  .brand-widget__preview-footer {
    gap: 8px 12px;
  }
}
@media (max-width: 809.98px) {
  .brand-widget__intro {
    align-items: flex-start;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 24px;
  }
  .brand-widget__actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
  }
  .brand-widget__studio {
    grid-template-columns: minmax(0, 1fr);
    border-radius: 22px;
  }
  .brand-widget__controls {
    padding: 20px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--color-border-subtle);
  }
  .brand-widget__panel-title {
    margin-bottom: 14px;
    font-size: var(--font-body);
  }
  .brand-widget__field {
    margin: 0;
  }
  .brand-widget__tabs {
    margin-bottom: 16px;
  }
  .brand-widget__settings-panel--appearance {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px 12px;
  }
  .brand-widget__settings-panel--appearance
    > .brand-widget__field:nth-child(-n + 2) {
    grid-column: 1/-1;
  }
  .brand-widget__themes {
    gap: 8px;
  }
  .brand-widget__swatches {
    gap: 8px;
  }
  .brand-widget__hint {
    margin-top: 16px;
    font-size: var(--font-caption);
  }
  .brand-widget__positions {
    gap: 5px;
  }
  .brand-widget__positions button {
    padding: 9px 0;
    gap: 2px;
    white-space: nowrap;
  }
  .brand-widget__positions svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
  }
  .brand-widget__preview {
    padding: 16px 12px;
  }
  .brand-widget__preview-caption {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "label badge"
      "steps steps";
    font-size: var(--font-caption);
    margin-bottom: 12px;
  }
  .brand-widget__preview-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-self: stretch;
    margin: 0;
  }
  .brand-widget__preview-steps button {
    padding: 8px 4px;
    gap: 0;
  }
  .brand-widget__preview-steps button > span {
    display: none;
  }
  .brand-widget__preview-footer {
    gap: 8px 12px;
    font-size: 10px;
    margin-top: 12px;
  }
}

.onboarding-illustration {
  position: relative;
  flex: none;
  color: var(--color-text-primary);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}
.onboarding-illustration * {
  box-sizing: border-box;
}
.onboarding-illustration :is(p, strong, span) {
  margin: 0;
}
.onboarding-illustration strong {
  font-weight: 600;
}
.onboarding-illustration svg {
  flex-shrink: 0;
  display: block;
}
.ob-illustration__window {
  position: absolute;
  inset: 12px 16px;
  display: grid;
  grid-template-rows: 52px minmax(0, 1fr) 32px;
  border: 1px solid var(--color-border-subtle);
  border-radius: 18px;
  overflow: hidden;
  background: var(--color-surface-white);
  box-shadow:
    0 12px 28px rgba(14, 35, 23, 0.08),
    0 2px 5px rgba(14, 35, 23, 0.03);
}
.ob-illustration__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid var(--color-border-subtle);
}
.ob-illustration__header-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(
    140deg,
    var(--color-accent-lime-soft),
    var(--color-accent-mint-soft)
  );
}
.ob-illustration__header > strong {
  font-size: 15px;
}
.ob-illustration__header-action {
  margin-left: auto !important;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--color-text-muted);
  font-size: 12px;
}
.ob-illustration__status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--color-text-muted);
  font-size: 12px;
  white-space: nowrap;
}
.ob-illustration__status i,
.ob-illustration__channels > div > i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-status-success);
}
.ob-illustration__footer {
  display: flex;
  align-items: center;
  gap: 5px;
  border-top: 1px solid var(--color-border-subtle);
  padding: 0 15px;
  color: var(--color-text-muted);
  font-size: 11px;
}
.ob-illustration__footer > span:last-child {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: 0.02em;
}
.ob-illustration__knowledge-body {
  padding: 12px 16px;
}
.ob-illustration__table-caption {
  display: flex;
  justify-content: space-between;
  color: var(--color-text-muted);
  font-size: 11px;
  margin-bottom: 8px;
}
.ob-illustration__source {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding: 7px 10px;
  margin-bottom: 6px;
  border: 1px solid var(--color-border-subtle);
  border-radius: 10px;
}
.ob-illustration__source-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 34px;
  border-radius: 8px;
}
.ob-illustration__source-icon--lime {
  background: var(--color-accent-lime-soft);
}
.ob-illustration__source-icon--mint {
  background: var(--color-accent-mint-soft);
}
.ob-illustration__source-icon--peach {
  background: var(--color-accent-peach-soft);
}
.ob-illustration__source > div {
  display: grid;
  gap: 1px;
}
.ob-illustration__source > div > span {
  color: var(--color-text-muted);
  font-size: 11px;
}
.ob-illustration__synced {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto !important;
  color: var(--color-text-secondary);
  font-size: 12px;
}
.ob-illustration__synced svg {
  color: var(--color-text-secondary);
}
.ob-illustration__knowledge-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  color: var(--color-text-muted);
  font-size: 11px;
}
.ob-illustration__knowledge-summary > span:first-child {
  display: flex;
  align-items: center;
  gap: 5px;
}
.ob-illustration__configure-body {
  padding: 14px 16px;
}
.ob-illustration__settings-pair {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 12px;
}
.ob-illustration__settings-pair > div {
  display: grid;
  gap: 5px;
}
.ob-illustration__settings-pair > div > span {
  font-size: 11px;
  color: var(--color-text-muted);
}
.ob-illustration__settings-pair strong {
  min-height: 35px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: var(--color-page-background);
  border: 1px solid var(--color-border-subtle);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
}
.ob-illustration__linked-knowledge {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 35px;
  margin: 11px 0;
  padding: 7px 10px;
  border-radius: 8px;
  background: linear-gradient(
    100deg,
    var(--color-accent-mint-soft),
    var(--color-page-background)
  );
  font-size: 13px;
}
.ob-illustration__linked-knowledge > span {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-left: auto;
  font-size: 12px;
}
.ob-illustration__handover-rules {
  border: 1px solid var(--color-border-subtle);
  border-radius: 10px;
  padding: 9px 11px;
}
.ob-illustration__handover-rules > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 27px;
  font-size: 13px;
}
.ob-illustration__rules-title {
  margin-bottom: 2px;
}
.ob-illustration__rules-title > strong {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ob-illustration__rules-title > span {
  color: var(--color-text-muted);
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--color-surface-subtle);
}
.ob-illustration__toggle {
  display: block;
  width: 27px;
  height: 16px;
  padding: 3px;
  border-radius: 10px;
  background: var(--color-accent-mint);
}
.ob-illustration__toggle::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--color-surface-white);
  box-shadow: 0 1px 2px rgba(14, 35, 23, 0.15);
}
.ob-illustration__test-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 148px;
  gap: 14px;
  padding: 16px;
}
.ob-illustration__test-chat {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ob-illustration__customer-question {
  align-self: flex-end;
  border-radius: 11px 11px 3px 11px;
  padding: 12px 13px;
  background: var(--color-surface-inverse);
  color: var(--color-surface-white);
  font-size: 13px;
}
.ob-illustration__test-answer {
  border: 1px solid var(--color-border-subtle);
  border-radius: 3px 11px 11px 11px;
  padding: 12px;
  background: linear-gradient(
    150deg,
    var(--color-surface-white) 40%,
    var(--color-accent-peach-soft)
  );
}
.ob-illustration__test-answer > strong {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  margin-bottom: 8px;
}
.ob-illustration__test-answer > strong > span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(
    135deg,
    var(--color-accent-lime),
    var(--color-accent-mint)
  );
}
.ob-illustration__test-answer > p {
  font-size: 13px;
  line-height: 1.6;
}
.ob-illustration__test-answer > div {
  display: flex;
  gap: 5px;
  align-items: center;
  border-top: 1px solid var(--color-border-default);
  margin-top: 9px;
  padding-top: 8px;
  color: var(--color-text-muted);
  font-size: 11px;
}
.ob-illustration__test-checks {
  padding: 12px;
  border-radius: 10px;
  background: var(--color-page-background);
  border: 1px solid var(--color-border-subtle);
}
.ob-illustration__test-checks > strong {
  display: block;
  font-size: 13px;
  margin-bottom: 12px;
}
.ob-illustration__test-checks > div {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
  font-size: 12px;
}
.ob-illustration__test-checks > div > span {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-accent-lime-soft);
}
.ob-illustration__test-checks > p {
  border-top: 1px solid var(--color-border-subtle);
  padding-top: 10px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--color-text-muted);
}
.ob-illustration__launch-body {
  display: grid;
  grid-template-columns: 154px minmax(0, 1fr);
}
.ob-illustration__channels {
  padding: 16px 12px;
  background: var(--color-page-background);
  border-right: 1px solid var(--color-border-subtle);
}
.ob-illustration__channels > span {
  display: block;
  color: var(--color-text-muted);
  font-size: 11px;
  margin-bottom: 12px;
}
.ob-illustration__channels > div {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 43px;
  font-size: 12px;
}
.ob-illustration__channel-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 28px;
  border: 1px solid var(--color-border-subtle);
  border-radius: 7px;
  background: var(--color-surface-white);
}
.ob-illustration__channel-icon > .social-brand-icon {
  width: 18px;
  height: 18px;
}
.ob-illustration__channels > div > i {
  margin-left: auto;
}
.ob-illustration__channels > .ob-illustration__channel-note {
  align-items: flex-start;
  gap: 6px;
  border-top: 1px solid var(--color-border-subtle);
  margin-top: 21px;
  padding-top: 13px;
  color: var(--color-text-muted);
  font-size: 11px;
  line-height: 1.7;
}
.ob-illustration__channel-note > svg {
  margin-top: 3px;
}
.ob-illustration__live-chat {
  padding: 13px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ob-illustration__conversation-heading {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: 13px;
}
.ob-illustration__avatar {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--color-accent-peach-soft);
  font-size: 12px;
}
.ob-illustration__conversation-heading > .ob-illustration__status {
  margin-left: auto;
  font-size: 11px;
}
.ob-illustration__incoming {
  align-self: flex-start;
  padding: 9px 11px;
  border: 1px solid var(--color-border-subtle);
  border-radius: 10px 10px 10px 3px;
  font-size: 12px;
}
.ob-illustration__outgoing {
  align-self: flex-end;
  max-width: 285px;
  padding: 9px 11px;
  border-radius: 10px 10px 3px 10px;
  background: var(--color-accent-mint-soft);
  font-size: 12px;
  line-height: 1.65;
}
.ob-illustration__takeover {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px dashed var(--color-border-default);
  padding-top: 10px;
  margin-top: auto;
  font-size: 11px;
}
.ob-illustration__takeover > span,
.ob-illustration__takeover > strong {
  display: flex;
  align-items: center;
  gap: 5px;
}
.ob-illustration__takeover > span {
  color: var(--color-text-muted);
}
.ob-illustration__takeover > strong {
  padding: 5px 7px;
  border-radius: 6px;
  background: var(--color-surface-inverse);
  color: var(--color-surface-white);
  font-weight: 500;
}

.onboarding-journey-entry {
  width: 100%;
}
.onboarding-journey__intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 44px;
}
.onboarding-journey__intro .product-heading {
  margin-bottom: 0;
  max-width: 870px;
}
.onboarding-journey__intro .product-eyebrow {
  margin-bottom: 14px;
}
.onboarding-journey__nav {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 28px;
}
.onboarding-journey__rail {
  position: absolute;
  left: 12.5%;
  right: 12.5%;
  top: 27px;
  height: 3px;
  border-radius: 3px;
  background: var(--color-border-subtle);
  overflow: hidden;
}
.onboarding-journey__rail > span {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    var(--color-accent-lime),
    var(--color-accent-mint)
  );
  transition: clip-path 350ms ease;
}
.onboarding-journey__step {
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 6px;
  padding: 8px 12px 16px;
  border: 0;
  border-radius: 16px;
  background: transparent;
}
.onboarding-journey__number {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
  border: 1px solid var(--color-border-subtle);
  border-radius: 50%;
  background: var(--color-surface-subtle);
  box-shadow: 0 0 0 6px var(--color-surface-subtle);
  color: var(--color-text-muted);
  font-size: var(--font-caption);
  font-weight: 500;
  transition:
    background 200ms,
    color 200ms,
    box-shadow 200ms;
}
.onboarding-journey__step strong {
  font-size: var(--font-label);
  font-weight: 500;
}
.onboarding-journey__step[aria-selected="true"] strong {
  font-weight: 600;
}
.onboarding-journey__step[aria-selected="true"] .onboarding-journey__number {
  background: var(--color-surface-inverse);
  border-color: var(--color-surface-inverse);
  color: var(--color-accent-lime);
  box-shadow:
    0 0 0 5px var(--color-surface-subtle),
    0 0 0 6px var(--color-border-default);
}
.onboarding-journey__step:hover .onboarding-journey__number {
  border-color: var(--color-text-muted);
}
.onboarding-journey__note {
  color: var(--color-text-muted);
  font-size: var(--font-caption);
}
.onboarding-journey__panels {
  display: grid;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-panel);
  background: var(--color-surface-white);
  box-shadow: var(--shadow-card);
  isolation: isolate;
}
.onboarding-journey__panel {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 16px;
  padding: 16px;
  min-width: 0;
  align-items: stretch;
  transition:
    opacity 250ms ease,
    transform 300ms ease,
    visibility 250ms;
}
.onboarding-journey__panel[aria-hidden="true"] {
  opacity: 0;
  transform: translateY(6px);
  visibility: hidden;
  pointer-events: none;
}
.onboarding-journey__panel[aria-hidden="false"] {
  opacity: 1;
  transform: none;
  visibility: visible;
  z-index: 1;
}
.onboarding-journey__panel:focus-visible {
  outline: 2px solid var(--color-text-primary);
  outline-offset: 5px;
  border-radius: var(--radius-panel);
}
.onboarding-journey__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 24px 24px 22px;
}
.onboarding-journey__caption {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-text-muted);
  font-size: var(--font-caption);
  margin-bottom: 18px;
}
.onboarding-journey__caption > span {
  padding: 4px 8px;
  border: 1px solid var(--color-border-subtle);
  border-radius: 6px;
  font-size: var(--font-caption);
  letter-spacing: 0.08em;
}
.onboarding-journey__copy h3 {
  font-size: var(--font-heading-three);
  text-wrap: wrap;
}
.onboarding-journey__copy > p {
  font-size: var(--font-body);
  color: var(--color-text-secondary);
  line-height: 1.75;
  margin-top: 18px;
}
.onboarding-journey__copy ul {
  display: grid;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 22px 0 16px;
}
.onboarding-journey__copy li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--font-body-small);
  color: var(--color-text-secondary);
}
.onboarding-journey__copy li svg {
  flex-shrink: 0;
  margin-top: 3px;
}
.onboarding-journey__link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 10px;
  min-height: 44px;
  font-size: var(--font-body-small);
  font-weight: 500;
}
.onboarding-journey__link:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}
.onboarding-journey__art {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 24px 14px 18px;
  border-radius: 20px;
  background: linear-gradient(
    140deg,
    color-mix(in srgb, var(--journey-accent) 35%, white),
    var(--journey-accent)
  );
}
.onboarding-journey__art--lime {
  --journey-accent: var(--color-accent-lime-soft);
}
.onboarding-journey__art--mint {
  --journey-accent: var(--color-accent-mint-soft);
}
.onboarding-journey__art--peach {
  --journey-accent: var(--color-accent-peach-soft);
}
.onboarding-journey__art--sky {
  --journey-accent: var(--color-accent-sky-soft);
}
.onboarding-journey__canvas {
  container-type: inline-size;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 560 / 360;
}
.onboarding-journey__canvas .onboarding-illustration {
  zoom: tan(atan2(100cqw, 560px));
}
.onboarding-journey__art-caption {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 528px;
  color: var(--color-text-muted);
  font-size: 11px;
  letter-spacing: 0.02em;
}
@media (prefers-reduced-motion: reduce) {
  .onboarding-journey__rail > span,
  .onboarding-journey__panel,
  .onboarding-journey__number {
    transition: none;
  }
}
@media (min-width: 810px) and (max-width: 1199.98px) {
  .onboarding-journey__intro {
    align-items: flex-start;
  }
  .onboarding-journey__copy {
    padding: 18px 12px;
  }
  .onboarding-journey__copy h3 {
    font-size: var(--font-heading-three);
  }
  .onboarding-journey__copy > p {
    font-size: var(--font-body);
  }
  .onboarding-journey__copy li {
    font-size: var(--font-body-small);
  }
  .onboarding-journey__panel {
    gap: 10px;
  }
  .onboarding-journey__art {
    padding-inline: 8px;
  }
}
@media (max-width: 809.98px) {
  .onboarding-journey__intro {
    display: block;
    margin-bottom: 24px;
  }
  .onboarding-journey__intro .product-eyebrow {
    margin-bottom: 12px;
  }
  .onboarding-journey__intro .product-heading > p {
    margin-top: 16px;
  }
  .onboarding-journey__nav {
    margin-bottom: 20px;
  }
  .onboarding-journey__rail {
    top: 26px;
    height: 2px;
  }
  .onboarding-journey__step {
    gap: 8px;
    padding: 8px 2px;
    border-radius: 10px;
  }
  .onboarding-journey__number {
    width: 36px;
    height: 36px;
    margin: 0;
    font-size: var(--font-caption);
  }
  .onboarding-journey__step strong {
    white-space: nowrap;
  }
  .onboarding-journey__note {
    display: none;
  }
  .onboarding-journey__panels {
    border-radius: 22px;
  }
  .onboarding-journey__panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 10px;
  }
  .onboarding-journey__copy {
    padding: 16px 12px 8px;
    justify-content: flex-start;
  }
  .onboarding-journey__caption {
    font-size: var(--font-caption);
    margin-bottom: 14px;
  }
  .onboarding-journey__copy h3 {
    font-size: var(--font-heading-three);
    text-wrap: wrap;
  }
  .onboarding-journey__copy > p {
    margin-top: 14px;
  }
  .onboarding-journey__copy ul {
    gap: 9px;
    margin: 18px 0 10px;
  }
  .onboarding-journey__copy li {
    gap: 8px;
  }
  .onboarding-journey__art {
    padding: 18px 0 12px;
    border-radius: 15px;
    gap: 4px;
  }
  .onboarding-journey__art-caption {
    font-size: 10px;
    padding-inline: 12px;
  }
}
.overview-illustration {
  position: relative;
  flex: none;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-text-primary);
  text-align: left;
}
.overview-illustration * {
  box-sizing: border-box;
}
.overview-illustration :is(p, strong, span) {
  margin: 0;
}
.overview-illustration strong {
  font-weight: 600;
}
.overview-illustration svg {
  display: block;
  flex: none;
}
.overview-illustration__focus-layer {
  transition:
    transform 260ms ease,
    box-shadow 260ms ease;
}
.feature-overview-card:is(:hover, :focus-within)
  .overview-illustration__focus-layer {
  transform: translateY(-3px);
}
.overview-illustration__handover {
  position: absolute;
  inset: 8px 8px 12px;
}
.overview-illustration__handover-message,
.overview-illustration__human-message {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 57px;
  padding: 10px 12px;
  border: 1px solid var(--color-border-subtle);
  border-radius: 13px;
  background: var(--glass-surface);
  box-shadow: 0 4px 9px rgba(14, 35, 23, 0.035);
}
.overview-illustration__handover-message {
  margin-right: 28px;
}
.overview-illustration__handover-message > svg {
  margin-left: auto;
  color: var(--color-text-muted);
}
.overview-illustration__handover-message strong,
.overview-illustration__human-message strong {
  font-size: 14px;
}
.overview-illustration__handover-message p,
.overview-illustration__human-message p {
  font-size: 13px;
  margin-top: 3px;
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.overview-illustration__ai-mark,
.overview-illustration__avatar {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  flex: none;
}
.overview-illustration__ai-mark {
  background: linear-gradient(
    140deg,
    var(--color-accent-lime-soft),
    var(--color-accent-mint-soft)
  );
}
.overview-illustration__handover-bridge {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 29px;
  padding-left: 27px;
  color: var(--color-text-muted);
  font-size: 10px;
}
.overview-illustration__handover-bridge > span:first-child {
  width: 28px;
  height: 29px;
  border-left: 1px dashed
    color-mix(in srgb, var(--color-text-muted) 45%, transparent);
  position: relative;
}
.overview-illustration__handover-bridge > span:first-child::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: -1px;
  width: 29px;
  height: 11px;
  border-left: 1px solid var(--color-border-default);
  border-bottom: 1px solid var(--color-border-default);
  border-bottom-left-radius: 8px;
}
.overview-illustration__human-message {
  margin-left: 28px;
  border-color: color-mix(
    in srgb,
    var(--color-accent-mint) 40%,
    var(--color-border-subtle)
  );
  background: linear-gradient(
    120deg,
    var(--color-surface-white),
    color-mix(in srgb, var(--color-accent-mint-soft) 45%, white)
  );
  box-shadow: 0 8px 16px rgba(14, 35, 23, 0.05);
}
.overview-illustration__avatar {
  position: relative;
  background: var(--color-accent-peach-soft);
  border-radius: 50%;
  font-size: 14px;
}
.overview-illustration__avatar > span {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--color-surface-white);
  border-radius: 50%;
  background: var(--color-status-success);
}
.overview-illustration__live-dot {
  flex: none;
  width: 5px;
  height: 5px;
  margin-left: auto !important;
  border-radius: 50%;
  background: var(--color-status-success);
}
.overview-illustration__inbox,
.overview-illustration__help {
  position: absolute;
  inset: 7px 9px 10px;
  padding: 11px 13px;
  border: 1px solid var(--color-border-subtle);
  border-radius: 14px;
  background: var(--glass-surface);
  box-shadow:
    0 8px 18px rgba(14, 35, 23, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.overview-illustration__inbox {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  padding: 0;
  overflow: hidden;
}
.overview-illustration__conversation-list {
  padding: 0 5px;
  border-right: 1px solid var(--color-border-subtle);
  background: color-mix(
    in srgb,
    var(--color-surface-white) 70%,
    var(--color-accent-peach-soft)
  );
}
.overview-illustration__inbox-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30px;
  padding: 0 5px;
  color: var(--color-text-secondary);
  font-size: 11px;
}
.overview-illustration__conversation {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 37px;
  padding: 4px 5px;
  border-radius: 7px;
}
.overview-illustration__conversation--selected {
  background: var(--color-surface-white);
  box-shadow: 0 2px 6px rgba(14, 35, 23, 0.06);
}
.overview-illustration__contact-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 23px;
  height: 23px;
  border-radius: 7px;
  font-size: 10px;
}
.overview-illustration__contact-avatar--peach {
  background: var(--color-accent-peach-soft);
}
.overview-illustration__contact-avatar--lavender {
  background: var(--color-accent-lavender-soft);
}
.overview-illustration__contact-avatar--sky {
  background: var(--color-accent-sky-soft);
}
.overview-illustration__conversation strong,
.overview-illustration__conversation > div > span {
  display: block;
  white-space: nowrap;
}
.overview-illustration__conversation strong {
  font-size: 11px;
  line-height: 1.35;
}
.overview-illustration__conversation > div > span {
  margin-top: 2px;
  font-size: 9px;
  color: var(--color-text-muted);
}
.overview-illustration__conversation-view {
  display: grid;
  grid-template-rows: 30px minmax(0, 1fr) 29px;
  min-width: 0;
  background: var(--glass-surface);
}
.overview-illustration__conversation-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 0 10px;
  border-bottom: 1px solid var(--color-border-subtle);
  white-space: nowrap;
}
.overview-illustration__conversation-heading strong {
  font-size: 11px;
}
.overview-illustration__conversation-heading > span {
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--color-accent-peach-soft);
  color: var(--color-text-secondary);
  font-size: 9px;
}
.overview-illustration__messages {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  padding: 9px 10px;
}
.overview-illustration__message {
  padding: 6px 9px;
  border: 1px solid var(--color-border-subtle);
  border-radius: 8px 8px 8px 2px;
  background: var(--color-surface-white);
  color: var(--color-text-secondary);
  font-size: 11px;
  white-space: nowrap;
}
.overview-illustration__message--reply {
  align-self: flex-end;
  border-color: color-mix(
    in srgb,
    var(--color-accent-mint) 25%,
    var(--color-border-subtle)
  );
  border-radius: 8px 8px 2px 8px;
  background: color-mix(in srgb, var(--color-accent-mint-soft) 60%, white);
}
.overview-illustration__reply-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 9px;
  border-top: 1px solid var(--color-border-subtle);
  color: var(--color-text-muted);
  font-size: 10px;
}
.overview-illustration__send {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 5px;
  background: var(--color-text-primary);
  color: var(--color-surface-white);
}
.overview-illustration__search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid
    color-mix(
      in srgb,
      var(--color-accent-sky-soft) 50%,
      var(--color-border-default)
    );
  border-radius: 8px;
  background: color-mix(in srgb, var(--color-accent-sky-soft) 32%, white);
  color: var(--color-text-secondary);
  font-size: 13px;
}
.overview-illustration__article {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 33px;
  padding: 0 7px;
  color: var(--color-text-secondary);
}
.overview-illustration__article strong {
  font-size: 14px;
  font-weight: 500;
}
.overview-illustration__article > svg:first-child {
  color: var(--color-text-muted);
}
.overview-illustration__article > svg:last-child {
  margin-left: auto;
}
.overview-illustration__source {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 7px 0;
  border-top: 1px solid var(--color-border-subtle);
  color: var(--color-text-muted);
  font-size: 10px;
}
@media (prefers-reduced-motion: reduce) {
  .overview-illustration__focus-layer {
    transition: none;
  }
  .feature-overview-card:is(:hover, :focus-within)
    .overview-illustration__focus-layer {
    transform: none;
  }
}
.agent-overview-illustration {
  position: relative;
  flex: none;
  color: var(--color-text-primary);
  font: 14px/1.4 var(--font-ui);
  text-align: left;
  --agent-art-accent: var(--color-accent-lime-soft);
}
.agent-overview-illustration--lead-capture {
  --agent-art-accent: var(--color-accent-lavender-soft);
}
.agent-overview-illustration--ai-ticketing {
  --agent-art-accent: var(--color-accent-butter-soft);
}
.agent-overview-illustration *,
.agent-overview-illustration *::before,
.agent-overview-illustration *::after {
  box-sizing: border-box;
}
.agent-overview-illustration svg {
  display: block;
  flex: none;
}
.agent-overview-illustration strong {
  font-size: 15px;
  font-weight: 600;
}
.agent-overview-illustration__scene {
  position: absolute;
  inset: 0;
}
.agent-overview-illustration__foreground {
  transition: transform 260ms ease;
}
.feature-overview-card:is(:hover, :focus-within)
  .agent-overview-illustration__foreground {
  transform: translateY(-3px);
}
.agent-overview-illustration__paper,
.agent-overview-illustration__answer,
.agent-overview-illustration__inquiry,
.agent-overview-illustration__contact,
.agent-overview-illustration__ticket {
  border: 1px solid var(--color-border-subtle);
  border-radius: 16px;
  background: linear-gradient(
    145deg,
    var(--color-surface-white),
    var(--glass-surface)
  );
  box-shadow:
    0 7px 15px rgba(14, 35, 23, 0.065),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.agent-overview-illustration__bridge {
  position: absolute;
  top: 73px;
  left: 128px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 28px;
  color: var(--color-text-muted);
}
.agent-overview-illustration__papers {
  position: absolute;
  left: 22px;
  top: 32px;
  width: 98px;
  height: 112px;
  transform: rotate(-7deg);
}
.agent-overview-illustration__papers::before {
  content: "";
  position: absolute;
  inset: -6px -7px 6px 7px;
  border: 1px solid var(--color-border-subtle);
  border-radius: 14px;
  background: color-mix(
    in srgb,
    var(--color-surface-white) 60%,
    var(--agent-art-accent)
  );
  transform: rotate(12deg);
}
.agent-overview-illustration__paper {
  position: relative;
  height: 100%;
  padding: 16px 17px;
}
.agent-overview-illustration__paper > svg {
  margin-bottom: 14px;
}
.agent-overview-illustration__paper-line,
.agent-overview-illustration__answer-line,
.agent-overview-illustration__inquiry-line,
.agent-overview-illustration__contact-line,
.agent-overview-illustration__ticket-line {
  display: block;
  height: 5px;
  border-radius: 5px;
  background: var(--color-border-subtle);
}
.agent-overview-illustration__paper-line {
  margin-top: 6px;
}
.agent-overview-illustration__paper-line:last-child {
  width: 65%;
  background: var(--color-accent-lime);
}
.agent-overview-illustration__answer {
  position: absolute;
  left: 169px;
  top: 26px;
  width: 155px;
  height: 124px;
  padding: 14px;
}
.agent-overview-illustration__answer-mark {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  margin-bottom: 12px;
  border-radius: 9px;
  background: linear-gradient(
    135deg,
    var(--color-accent-lime-soft),
    var(--color-accent-mint-soft)
  );
}
.agent-overview-illustration__answer-line {
  width: 100%;
  margin-bottom: 7px;
}
.agent-overview-illustration__answer-line
  + .agent-overview-illustration__answer-line {
  width: 76%;
}
.agent-overview-illustration__citation {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 12px;
  color: var(--color-text-secondary);
  font-size: 12px;
  white-space: nowrap;
}
.agent-overview-illustration__citation sup {
  display: grid;
  place-items: center;
  width: 15px;
  height: 16px;
  margin-left: auto;
  border-radius: 4px;
  background: var(--color-accent-lime-soft);
  color: var(--color-text-primary);
  font-size: 10px;
}
.agent-overview-illustration__inquiry {
  position: absolute;
  left: 15px;
  top: 40px;
  width: 108px;
  height: 84px;
  padding: 16px;
  transform: rotate(-5deg);
  border-bottom-left-radius: 4px;
}
.agent-overview-illustration__dots {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 17px;
  margin-bottom: 12px;
}
.agent-overview-illustration__dots > i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-text-secondary);
}
.agent-overview-illustration__inquiry-line {
  margin-top: 7px;
}
.agent-overview-illustration__inquiry-line:last-child {
  width: 62%;
}
.agent-overview-illustration__contact {
  position: absolute;
  left: 166px;
  top: 23px;
  width: 161px;
  height: 127px;
  padding: 15px 13px;
}
.agent-overview-illustration__contact-heading {
  display: flex;
  align-items: center;
  gap: 9px;
}
.agent-overview-illustration__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--agent-art-accent);
}
.agent-overview-illustration__contact-line {
  width: 55px;
  height: 4px;
  margin-top: 7px;
}
.agent-overview-illustration__contacts {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.agent-overview-illustration__contacts > span {
  display: grid;
  place-items: center;
  width: 37px;
  height: 36px;
  border: 1px solid var(--color-border-subtle);
  border-radius: 10px;
  background: color-mix(
    in srgb,
    var(--color-surface-white) 65%,
    var(--agent-art-accent)
  );
}
.agent-overview-illustration__contacts svg {
  width: 20px;
  height: 20px;
}
.agent-overview-illustration__question {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: -5px;
  margin-bottom: 7px;
  border-radius: 8px;
  background: var(--color-accent-peach-soft);
  font-size: 18px;
  font-weight: 600;
}
.agent-overview-illustration__ticket {
  position: absolute;
  left: 166px;
  top: 23px;
  width: 161px;
  height: 127px;
  padding: 14px 13px;
}
.agent-overview-illustration__ticket-heading {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 17px;
}
.agent-overview-illustration__priority {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
  margin-left: auto;
}
.agent-overview-illustration__priority > i {
  width: 3px;
  height: 6px;
  border-radius: 1px;
  background: var(--color-text-secondary);
}
.agent-overview-illustration__priority > i:nth-child(2) {
  height: 10px;
}
.agent-overview-illustration__priority > i:last-child {
  height: 14px;
  background: var(--color-border-subtle);
}
.agent-overview-illustration__ticket-line {
  margin-top: 7px;
}
.agent-overview-illustration__ticket-line
  + .agent-overview-illustration__ticket-line {
  width: 62%;
}
.agent-overview-illustration__pending {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 13px;
  padding: 4px 8px;
  border-radius: 7px;
  background: var(--agent-art-accent);
  font-size: 12px;
  color: var(--color-text-secondary);
}
@media (prefers-reduced-motion: reduce) {
  .agent-overview-illustration__foreground {
    transition: none;
  }
  .feature-overview-card:is(:hover, :focus-within)
    .agent-overview-illustration__foreground {
    transform: none;
  }
}

.feature-overview-card__heading {
  min-width: 0;
}
.feature-overview-card--agent {
  min-height: 540px;
}
.feature-overview-card--agent .product-feature-symbol {
  margin-bottom: 20px;
}
.feature-overview-card--agent > p {
  max-width: 100%;
}
.feature-overview-card__concept {
  container-type: inline-size;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 340 / 168;
  margin: 24px auto 10px;
}
.feature-overview-card__concept .agent-overview-illustration {
  zoom: tan(atan2(100cqw, 340px));
}
.feature-overview-card--agent .product-feature-bottom {
  min-height: 124px;
  padding-top: 8px;
}
.feature-overview-card--agent .product-card-character {
  width: 132px;
  height: 132px;
  right: -12px;
}
.feature-overview-card--platform {
  padding: 26px 26px 22px;
  background: linear-gradient(
    155deg,
    var(--color-surface-white) 10%,
    color-mix(in srgb, var(--overview-accent) 35%, white)
  );
  box-shadow: var(--edge-card), var(--shadow-card);
}
.feature-overview-card--platform .feature-overview-card__heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.feature-overview-card--platform .product-feature-symbol {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-color: color-mix(in srgb, var(--color-text-primary) 8%, transparent);
  background: var(--overview-accent);
  margin: 0;
}
.feature-overview-card--platform h3 {
  font-size: var(--font-heading-three);
  margin: 0;
}
.feature-overview-card__illustration {
  container-type: inline-size;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 340 / 168;
  margin: 20px auto 18px;
}
.feature-overview-card__illustration .overview-illustration {
  zoom: tan(atan2(100cqw, 340px));
}
.feature-overview-card--platform .product-feature-bottom {
  min-height: 44px;
}
.feature-overview-card--platform .product-text-link {
  box-shadow: inset 0 0 0 1px var(--color-border-subtle);
  min-height: 44px;
}
@media (prefers-reduced-motion: reduce) {
  .feature-overview-card {
    transition: none;
  }
  .feature-overview-card:hover {
    transform: none;
  }
}
@media (min-width: 810px) and (max-width: 1199.98px) {
  .feature-overview-card--platform {
    padding-inline: 24px;
  }
}
@media (max-width: 809.98px) {
  .feature-overview-card--agent {
    min-height: 0;
  }
  .feature-overview-card--agent .product-feature-symbol {
    margin-bottom: 16px;
  }
  .feature-overview-card__concept {
    margin-block: 20px 8px;
  }
  .feature-overview-card--agent .product-feature-bottom {
    min-height: 116px;
  }
  .feature-overview-card--agent .product-card-character {
    width: 120px;
    height: 120px;
    right: -8px;
  }
  .feature-overview-card--platform {
    padding: 20px;
    min-height: 0;
  }
  .feature-overview-card--platform .feature-overview-card__heading {
    gap: 10px;
    margin-bottom: 14px;
  }
  .feature-overview-card--platform .product-feature-symbol {
    width: 34px;
    height: 34px;
    margin: 0;
  }
  .feature-overview-card--platform h3 {
    font-size: var(--font-heading-three);
    margin: 0;
  }
  .feature-overview-card__illustration {
    margin-block: 18px 14px;
  }
  .feature-overview-card--platform .product-feature-bottom {
    min-height: 44px;
  }
}