.landing-main[data-site-content]:not([data-site-content-ready="true"]) {
  visibility: hidden;
  animation: site-content-failsafe 0s 12s forwards;
}
@keyframes site-content-failsafe { to { visibility: visible; } }

.site-showcase { --demo-accent: var(--site-accent, #aeb4ff); min-width: 0; color: #e6e6f0; }
.site-content-block { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: clamp(28px, 5vw, 96px); padding: 64px 0; border-bottom: 1px solid rgba(180,187,220,.14); }
.site-content-hero { min-height: 65vh; padding: clamp(48px, 7vw, 112px) 0; }
.site-content-copy { min-width: 0; }
.site-showcase .site-content-copy h1 { font-size: clamp(36px, 4.6vw, 76px); font-weight: 600; line-height: 1.15; letter-spacing: -.03em; margin: 0 0 28px; text-wrap: balance; overflow-wrap: anywhere; }
.site-showcase .site-content-copy h2 { font-size: clamp(26px, 3vw, 44px); font-weight: 500; line-height: 1.25; margin: 0 0 24px; overflow-wrap: anywhere; }
.site-content-kicker { color: var(--demo-accent); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 24px; }
.site-content-description { font-size: 17px; line-height: 1.85; color: #b5bfce; margin: 0 0 32px; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 70ch; }
.site-content-subtitle { font-size: clamp(22px, 2.4vw, 38px); line-height: 1.5; color: #eef4f1; margin: 0 0 24px; white-space: pre-wrap; overflow-wrap: anywhere; }
.site-content-copy h1, .site-content-copy h2 { white-space: pre-wrap; }
.site-content-text { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 24px; }
.site-demo.site-demo-text { padding: 0; border: 0; background: transparent; }
.site-demo-text .site-demo-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 32px; }
.site-demo-text h3 { margin: 0 0 14px; font-size: 21px; font-weight: 500; line-height: 1.5; }
.site-demo-text .site-demo-body p { color: #b5bfce; font-size: 16px; line-height: 1.85; }
.site-showcase [id] { scroll-margin-top: 24px; }
.site-content-banner { grid-template-columns: minmax(0, 1fr); }
.site-content-banner .site-content-copy { max-width: 1000px; }
.site-demo { min-width: 0; padding: 24px; border: 1px solid rgba(180,187,220,.16); border-radius: 14px; background: rgba(18,24,39,.65); }
.site-demo-caption { font-size: 12px; color: #9daac2; margin-bottom: 28px; letter-spacing: .08em; }
.site-demo-items { display: flex; flex-direction: column; gap: 22px; list-style: none; margin: 0; padding: 0; }
.site-demo-item { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.site-demo-body { min-width: 0; flex: 1; }
.site-demo-body strong { display: block; font-size: 13px; color: #c2cde0; margin-bottom: 8px; }
.site-demo-body p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.7; }
.site-demo-links { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 16px; }
.site-demo-links a { color: var(--demo-accent); overflow-wrap: anywhere; }
.site-demo-avatar { display: grid; place-items: center; flex: 0 0 30px; height: 30px; border-radius: 50%; background: #354365; color: #fff; font-size: 12px; }
.site-demo-conversation .site-demo-body p { padding: 12px 16px; border-radius: 0 12px 12px; background: var(--conversation-left-bg); color: var(--conversation-left-text); }
.site-demo-conversation .site-demo-item { max-width: 92%; }
.site-demo-conversation .site-demo-right { flex-direction: row-reverse; margin-left: auto; }
.site-demo-right .site-demo-body strong { text-align: right; }
.site-demo-conversation .site-demo-right .site-demo-body p { background: var(--conversation-right-bg); color: var(--conversation-right-text); border-radius: 12px 0 12px 12px; }
.site-demo-number { font-size: 26px; color: var(--demo-accent); font-variant-numeric: tabular-nums; flex: 0 0 40px; }
.site-demo-flow .site-demo-item:not(:last-child) { padding-bottom: 24px; border-bottom: 1px solid rgba(180,187,220,.16); }
.site-demo-features .site-demo-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.site-demo-features .site-demo-item { padding: 16px 0; border-top: 1px solid rgba(180,187,220,.16); }
@media (max-width: 760px) { .site-content-block { grid-template-columns: minmax(0, 1fr); min-height: 0; } .site-demo { padding: 18px; } }

/* Different scenes alternate light/dark panels; speakers also differ in luminance. */
.story-conversation, .site-demo-conversation {
  --conversation-bg: #142c30; --conversation-border: #3a6267; --conversation-label: #b8d5d6;
  --conversation-left-bg: #29434d; --conversation-left-text: #f1f6f8;
  --conversation-right-bg: #d3f4e3; --conversation-right-text: #18392d;
  padding: clamp(18px, 2.5vw, 32px); border: 1px solid var(--conversation-border); border-radius: 20px;
  background: var(--conversation-bg); color: var(--conversation-left-text);
}
[data-conversation-theme="daylight"] {
  --conversation-bg: #e9edf5; --conversation-border: #c0cbdd; --conversation-label: #45526a;
  --conversation-left-bg: #ffffff; --conversation-left-text: #263247;
  --conversation-right-bg: #334766; --conversation-right-text: #f6f8ff;
}
[data-conversation-theme="ember"] {
  --conversation-bg: #30231f; --conversation-border: #785747; --conversation-label: #e3c8b3;
  --conversation-left-bg: #594036; --conversation-left-text: #fff4ea;
  --conversation-right-bg: #f1d8b4; --conversation-right-text: #422b20;
}
[data-conversation-theme="lilac"] {
  --conversation-bg: #efedf8; --conversation-border: #cec6e2; --conversation-label: #59516f;
  --conversation-left-bg: #ffffff; --conversation-left-text: #39334b;
  --conversation-right-bg: #504673; --conversation-right-text: #faf6ff;
}
.site-demo-conversation .site-demo-caption, .site-demo-conversation .site-demo-body strong,
.site-demo-conversation .site-demo-links a { color: var(--conversation-label); }
.site-demo-conversation .site-demo-avatar { background: var(--conversation-left-bg); color: var(--conversation-left-text); }
.site-demo-conversation .site-demo-right .site-demo-avatar { background: var(--conversation-right-bg); color: var(--conversation-right-text); }
.conversation-keywords { display: grid; gap: 12px; padding-top: 18px; border-top: 1px solid var(--conversation-border); }
.conversation-keywords-title { color: var(--conversation-label); font-size: 11px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.conversation-keyword-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.conversation-keyword-profile { display: flex; align-items: baseline; gap: 8px; min-width: 0; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--conversation-left-bg) 36%, transparent); }
.conversation-keyword-profile:nth-child(even) { background: color-mix(in srgb, var(--conversation-right-bg) 28%, transparent); }
.conversation-keyword-profile dt { flex: 0 0 auto; color: var(--conversation-label); font-size: 12px; font-weight: 650; }
.conversation-keyword-profile dd { min-width: 0; margin: 0; color: var(--conversation-left-text); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
[data-conversation-theme="daylight"] .conversation-keyword-profile dd,
[data-conversation-theme="lilac"] .conversation-keyword-profile dd { color: var(--conversation-left-text); }
.story-conversation .story-message, .site-demo-conversation .site-demo-item { opacity: 1; transform: translateY(0); transition: opacity 280ms ease, transform 280ms ease; }
.story-conversation .conversation-pending, .site-demo-conversation .conversation-pending { opacity: 0; transform: translateY(10px); }
.conversation-controls { min-height: 30px; display: flex; justify-content: flex-end; margin-top: 12px; }
.conversation-show-all { padding: 4px 10px; margin: 0; border: 1px solid var(--conversation-border); border-radius: 6px; background: transparent; color: var(--conversation-label); font: inherit; font-size: 12px; cursor: pointer; }
.conversation-show-all:focus-visible { outline: 2px solid var(--conversation-label); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .story-conversation .story-message, .site-demo-conversation .site-demo-item { transition: none; transform: none; }
}
@media (max-width: 480px) {
  .conversation-keyword-list { grid-template-columns: minmax(0, 1fr); }
}

/* Editor controls and preview use the same rendering component as the live sites. */
.content-toolbar, .content-actions { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.content-toolbar label { min-width: 160px; }
.content-toolbar select { width: 100%; padding: 10px; border-radius: 6px; }
.content-actions button { margin: 0; }
.content-status { min-height: 24px; color: #aad7be; white-space: pre-wrap; }
.content-status.error { color: #ffb4b4; }
.content-editor-layout { display: grid; grid-template-columns: minmax(300px, .8fr) minmax(0, 1.2fr); gap: 32px; align-items: start; }
.content-fields { min-width: 0; margin: 0; padding: 0; border: 0; }
.content-fields > #content-blocks > label { display: block; margin-bottom: 24px; }
.content-fields > #content-blocks > label input { width: 100%; padding: 10px; border-radius: 6px; font: inherit; }
.content-block-editor { padding: 20px 0; border: 0; border-top: 1px solid #2a3348; margin: 0 0 24px; min-width: 0; }
.content-block-editor legend { padding: 0 12px 0 0; font-size: 18px; }
.content-block-editor input:not([type=checkbox]), .content-block-editor select, .content-block-editor textarea { width: 100%; padding: 10px; border-radius: 6px; font: inherit; }
.content-block-editor textarea { resize: vertical; }
.content-demo-row { margin-top: 18px; padding: 12px; border: 1px solid #2a3348; border-radius: 6px; }
.content-order-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.content-order-actions button { padding: 6px 10px; font-size: 12px; }
.content-preview-wrap { position: sticky; top: calc(var(--workspace-header-height, 76px) + 16px); max-height: calc(100dvh - var(--workspace-header-height, 76px) - 40px); overflow: auto; border: 1px solid #2a3348; border-radius: 8px; padding: 24px; background: #0c111c; }
.content-preview-wrap > h3 { margin-top: 0; }
.content-preview-wrap .site-content-block { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 28px 0; gap: 28px; }
.content-preview-wrap .site-content-copy h1 { font-size: 36px; }
.content-preview-wrap .site-content-copy h2 { font-size: 28px; }
.content-preview-wrap .landing-btn { pointer-events: none; }
@media (max-width: 1100px) { .content-editor-layout { grid-template-columns: minmax(0, 1fr); } .content-preview-wrap { position: static; max-height: none; } }