.site-shell {
  font-family: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", Arial, ui-sans-serif, sans-serif;
  font-kerning: normal;
  font-optical-sizing: auto;
  font-synthesis: none;
  font-variant-ligatures: common-ligatures contextual;
}

.hero-index3 h1,
.section-heading h2,
.context-copy h2,
.developers-copy h2,
.final-inner h2,
.team-brief h3,
.stack-copy h3,
.stack-card-copy h3,
.pricing-card-top h3 {
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  text-wrap: balance;
}

.hero-lead,
.section-heading p,
.context-copy p,
.proof-side p,
.control-card p,
.team-brief p,
.team-stream p,
.scenario-brief p,
.scenario-message p,
.pricing-card-desc,
.pricing-home-card li,
.stack-copy p,
.stack-card-copy p,
.support-card p,
.evidence-flow p,
.developers-copy p,
.final-inner p {
  text-wrap: pretty;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
}

.hero-index3 h1 {
  max-width: 940px;
  font-weight: 430;
  letter-spacing: -.052em;
  line-height: .96;
}

.section-heading h2,
.context-copy h2,
.developers-copy h2,
.final-inner h2 {
  font-weight: 430;
  letter-spacing: -.05em;
  line-height: 1.02;
}

.section-heading > p,
.section-heading > div > p,
.proof-side p,
.developers-copy > p,
.final-inner > p {
  line-height: 1.67;
}

html[lang="ru"] .hero-index3 h1 { letter-spacing: -.042em; line-height: .99; }
html[lang="ru"] .section-heading h2,
html[lang="ru"] .context-copy h2,
html[lang="ru"] .developers-copy h2,
html[lang="ru"] .final-inner h2 { letter-spacing: -.038em; line-height: 1.045; }

.product-nav a {
  display: inline-flex;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  color: var(--muted);
  align-items: center;
  font-size: 12px;
  font-weight: 600;
}

.product-nav a:hover,
.product-nav a:focus-visible { color: #fff; }

.product-header-inner {
  flex-wrap: nowrap;
  gap: 18px;
}

.product-brand { margin-right: 0; }

.product-nav {
  order: 0;
  width: auto;
  min-width: 0;
  padding-bottom: 0;
  overflow-x: auto;
  flex: 1 1 auto;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
}

.product-nav::-webkit-scrollbar { display: none; }
.product-header-actions { margin-left: 0; flex: 0 0 auto; }

.page-language {
  width: 76px;
  min-width: 76px;
  height: 40px;
  padding: 0 25px 0 34px;
  border-color: #303030;
  background-color: #0b0b0b;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8.5' fill='none' stroke='%23d8d8d8' stroke-width='1.5'/%3E%3Cpath d='M3.8 12h16.4M12 3.5c2.2 2.3 3.3 5.1 3.3 8.5S14.2 18.2 12 20.5C9.8 18.2 8.7 15.4 8.7 12S9.8 5.8 12 3.5Z' fill='none' stroke='%23d8d8d8' stroke-width='1.35' stroke-linecap='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 12px center, right 10px center;
  background-size: 18px 18px, 10px 7px;
  color: #e6e6e6;
  appearance: none;
  -webkit-appearance: none;
  font-size: 12px;
  font-weight: 700;
}

.page-language:hover { border-color: #505050; }
.page-language:focus-visible { border-color: #707070; outline: 2px solid rgba(255,255,255,.08); outline-offset: 2px; }
.page-language option { background: #111; color: #eee; font-size: 12px; }

.header-download {
  min-height: 40px;
  padding: 0 15px;
  border-color: #343434;
  background: #151515;
  color: #ededed;
  gap: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.header-download svg { width: 14px; height: 14px; fill: currentColor; flex: 0 0 auto; }
.header-download:hover { border-color: #565656; background: #202020; color: #fff; transform: translateY(-1px); }

.hero-index3 .hero-copy { max-width: 900px; }
.hero-index3 h1 { max-width: 900px; }
.hero-index3 .hero-lead {
  max-width: 760px;
  color: #b8b8b8;
  font-size: 20px;
  line-height: 1.55;
}

.hero-index3 .hero-demo-product { max-width: 1180px; }
.hero-demo-product .promanos-demo { box-shadow: 0 42px 130px rgba(0, 0, 0, .52); }

.hero-assurance {
  max-width: 900px;
  margin: 25px auto 0;
  color: #9d9d9d;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -.012em;
  text-align: center;
}

.orchestration,
.control,
.proof,
.use-cases,
.capability-section,
.evidence-boundary,
.pricing-home,
.developers { padding-top: 120px; padding-bottom: 120px; }

.work-context { padding-top: 120px; padding-bottom: 120px; }
.context-inner { grid-template-columns: 1fr; }
.context-copy { max-width: 820px; }
.final-cta { padding-top: 122px; padding-bottom: 122px; }

.orchestration,
.system-stack { border-top: 1px solid var(--line-soft); }

.orchestration-heading { max-width: 900px; }

.execution-chain {
  display: grid;
  padding: 14px;
  overflow: hidden;
  border: 1px solid #242424;
  border-radius: var(--radius);
  background: #111;
  grid-template-columns: minmax(120px, 1.05fr) auto repeat(4, minmax(100px, .9fr) auto) minmax(175px, 1.4fr);
  align-items: stretch;
}

.execution-node {
  display: flex;
  min-height: 126px;
  padding: 17px;
  border: 1px solid #292929;
  border-radius: 13px;
  background: #171717;
  flex-direction: column;
  justify-content: space-between;
}

.execution-node strong {
  color: #dedede;
  font-size: 15px;
  font-weight: 600;
}

.execution-index {
  color: #717171;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
}

.execution-start { border-color: #3c3c3c; background: #1c1c1c; }
.execution-result {
  z-index: 1;
  min-height: 144px;
  border-color: #858585;
  background: linear-gradient(145deg, #fff, #dcdcdc);
  box-shadow: 0 18px 48px rgba(255,255,255,.08), 0 0 0 1px rgba(255,255,255,.1);
  transform: scale(1.035);
}
.execution-result strong { color: #090909; font-size: 18px; }
.execution-result .execution-index { color: #555; }
.execution-arrow { display: grid; width: 27px; color: #575757; place-items: center; font-size: 14px; }

.execution-principle {
  margin: 22px auto 0;
  color: #c8c8c8;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
}

.pricing-home-heading {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 20px;
}

.pricing-home-heading .section-kicker,
.pricing-home-heading h2,
.pricing-home-heading > p { margin: 0; }

.pricing-home-heading h2 { max-width: 980px; }

.pricing-home-heading > p { max-width: 760px; }

.section-heading > p,
.section-heading > div > p,
.proof-side p,
.developers-copy > p,
.final-inner > p {
  color: #aaa;
  font-size: 17px;
}

.control-card p { color: #a3a3a3; font-size: 14.5px; }
.context-lead { color: #b2b2b2; font-size: 17px; }

.use-cases {
  border-top: 1px solid var(--line-soft);
  background: #0a0a0a;
}

.use-cases-heading { align-items: end; }
.use-cases-heading > p { max-width: 510px; }
.use-case-grid {
  display: grid;
  margin-top: 50px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.use-case-card {
  display: flex;
  min-height: 310px;
  padding: 30px;
  border: 1px solid #292929;
  border-radius: 18px;
  background: linear-gradient(145deg, #151515, #101010);
  flex-direction: column;
}

.use-case-index {
  color: #777;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
}

.use-case-card h3 { margin: 64px 0 0; font-size: 22px; font-weight: 550; letter-spacing: -.035em; }
.use-case-card p { margin: 14px 0 24px; color: #aaa; font-size: 14px; line-height: 1.65; }
.use-case-card strong { margin-top: auto; color: #cbd2ff; font-size: 13px; font-weight: 650; }
.example-disclaimer { margin: 18px 0 0; color: #7f7f7f; font-size: 12px; text-align: right; }

.scenario-demo {
  display: grid;
  min-height: 720px;
  overflow: hidden;
  border: 1px solid #292929;
  border-radius: 24px;
  background: #151515;
  box-shadow: 0 36px 110px rgba(0,0,0,.38);
  grid-template-columns: 305px minmax(0, 1fr);
}
.scenario-sidebar {
  display: flex;
  min-width: 0;
  padding: 17px;
  border-right: 1px solid #2a2a2a;
  background: #101010;
  flex-direction: column;
}
.scenario-window-bar { display: flex; height: 28px; align-items: center; gap: 8px; }
.scenario-window-bar > span { width: 9px; height: 9px; border-radius: 50%; background: #444; }
.scenario-window-bar > span:first-child { background: #dc655f; }
.scenario-window-bar > span:nth-child(2) { background: #d9aa4c; }
.scenario-window-bar > span:nth-child(3) { background: #4dad6d; }
.scenario-window-bar b { margin-left: auto; color: #686868; font-size: 10px; font-weight: 700; letter-spacing: .06em; }
.scenario-search {
  display: flex;
  min-height: 43px;
  margin: 10px 0 14px;
  padding: 0 13px;
  border: 1px solid #303030;
  border-radius: 11px;
  background: #191919;
  color: #777;
  align-items: center;
  gap: 9px;
}
.scenario-search span { font-size: 19px; line-height: 1; }
.scenario-search b { font-size: 11px; font-weight: 600; }
.scenario-tabs { display: flex; flex-direction: column; gap: 5px; }
.scenario-tab {
  display: grid;
  width: 100%;
  min-height: 76px;
  padding: 11px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  color: #aaa;
  cursor: pointer;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  text-align: left;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease, transform 150ms ease;
}
.scenario-tab:hover { background: #171717; color: #ddd; transform: translateX(2px); }
.scenario-tab.is-active { border-color: #303030; background: #202020; color: #f0f0f0; }
.scenario-tab > span:nth-child(2) { min-width: 0; }
.scenario-tab b,
.scenario-tab small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scenario-tab b { font-size: 12px; font-weight: 650; }
.scenario-tab small { margin-top: 6px; color: #757575; font-size: 10px; }
.scenario-tab time { color: #666; font-size: 9px; font-weight: 700; }
.scenario-avatar {
  display: grid;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: #0c0c0c;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
}
.avatar-launch { background: #e4a45f; }
.avatar-audit { background: #84a9ed; }
.avatar-customer { background: #72c0ad; }
.avatar-leadership { background: #ab91e8; }
.scenario-user { display: flex; margin-top: auto; padding: 12px 8px 3px; color: #aaa; align-items: center; gap: 10px; }
.scenario-user span { display: grid; width: 29px; height: 29px; border-radius: 50%; background: #292929; color: #999; place-items: center; font-size: 9px; font-weight: 700; }
.scenario-user b { font-size: 11px; font-weight: 600; }
.scenario-workspace { min-width: 0; background: #181818; }
.scenario-panel { display: flex; min-height: 720px; flex-direction: column; }
.scenario-panel[hidden] { display: none; }
.scenario-panel-header {
  display: flex;
  min-height: 68px;
  padding: 0 23px;
  border-bottom: 1px solid #2b2b2b;
  background: #1d1d1d;
  align-items: center;
  gap: 12px;
}
.scenario-panel-header .scenario-avatar { width: 31px; height: 31px; border-radius: 10px; }
.scenario-panel-header > div { min-width: 0; }
.scenario-panel-header strong,
.scenario-panel-header small { display: block; }
.scenario-panel-header strong { overflow: hidden; color: #e2e2e2; font-size: 13px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.scenario-panel-header small { margin-top: 4px; color: #747474; font-size: 9px; }
.scenario-runtime { display: inline-flex; min-height: 27px; margin-left: auto; padding: 0 10px; border: 1px solid #343434; border-radius: 999px; color: #999; align-items: center; gap: 7px; font-size: 9px; white-space: nowrap; }
.scenario-runtime i { width: 5px; height: 5px; border-radius: 50%; background: #83b79d; box-shadow: 0 0 8px rgba(131,183,157,.4); }
.scenario-runtime b { font-weight: 700; }
.scenario-thread {
  display: flex;
  min-height: 0;
  padding: 26px 30px 20px;
  overflow: auto;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 13px;
  scrollbar-width: thin;
  scrollbar-color: #454545 transparent;
}
.scenario-brief {
  max-width: 680px;
  padding: 20px;
  border: 1px solid #303030;
  border-radius: 16px;
  background: linear-gradient(145deg, #232323, #1c1c1c);
}
.scenario-brief > span { color: #818181; font-size: 9px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.scenario-brief p { margin: 11px 0 15px; color: #d2d2d2; font-size: 13px; line-height: 1.55; }
.scenario-brief > div { display: flex; flex-wrap: wrap; gap: 6px; }
.scenario-brief > div b { display: inline-flex; min-height: 25px; padding: 0 9px; border: 1px solid #373737; border-radius: 999px; color: #929292; align-items: center; font-size: 9px; font-weight: 650; }
.scenario-system-note { display: flex; margin: 4px 0; color: #6f6f6f; align-items: center; gap: 11px; font-size: 10px; }
.scenario-system-note::before,
.scenario-system-note::after { height: 1px; background: #2a2a2a; content: ""; flex: 1 1 auto; }
.scenario-system-note span { flex: 0 1 auto; text-align: center; }
.scenario-message { max-width: 690px; padding: 14px 17px; border-radius: 15px; }
.scenario-message p { margin: 0; color: #d0d0d0; font-size: 12px; line-height: 1.55; }
.message-agent { align-self: flex-start; background: #272727; }
.message-agent b { color: #b5a4ea; font-weight: 650; }
.message-user { max-width: 560px; margin-left: auto; background: #ececec; }
.message-user p { color: #171717; }
.scenario-checklist {
  display: flex;
  max-width: 690px;
  padding: 15px 17px;
  border: 1px solid #2e2e2e;
  border-radius: 15px;
  background: #1d1d1d;
  flex-direction: column;
  gap: 8px;
}
.scenario-checklist span { color: #8d8d8d; font-size: 10px; }
.scenario-checklist b { color: #c1c1c1; font-weight: 550; }
.scenario-result-card {
  display: grid;
  max-width: 690px;
  padding: 17px 18px;
  border: 1px solid #464646;
  border-radius: 15px;
  background: linear-gradient(135deg, #262626, #202020);
  grid-template-columns: 1fr auto;
  gap: 6px 20px;
  align-items: center;
}
.scenario-result-card > span { color: #8c9bf0; font-size: 9px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.scenario-result-card strong { grid-column: 1; color: #e1e1e1; font-size: 12px; font-weight: 650; }
.scenario-result-card small { grid-row: 1 / span 2; grid-column: 2; max-width: 190px; color: #a4a4a4; font-size: 9px; line-height: 1.4; text-align: right; }
.scenario-composer {
  display: flex;
  min-height: 48px;
  margin: 0 22px 20px;
  padding: 0 10px;
  border: 1px solid #343434;
  border-radius: 15px;
  background: #1c1c1c;
  color: #646464;
  align-items: center;
  gap: 9px;
}
.scenario-composer span { display: grid; width: 29px; height: 29px; border-radius: 50%; background: #292929; place-items: center; font-size: 17px; }
.scenario-composer b { font-size: 10px; font-weight: 550; }
.scenario-composer i { margin-left: auto; font-size: 12px; font-style: normal; }

.pricing-home {
  border-top: 1px solid var(--line-soft);
  background:
    radial-gradient(circle at 61% 38%, rgba(87, 113, 173, .1), transparent 29%),
    #080909;
}
.pricing-home-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.pricing-home-card {
  display: flex;
  min-height: 520px;
  padding: 25px;
  border: 1px solid #292929;
  border-radius: 20px;
  background: linear-gradient(155deg, #111213, #0d0e0f);
  flex-direction: column;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.pricing-home-card:hover { border-color: #3a3a3a; background: #121416; transform: translateY(-2px); }
.pricing-home-card.is-featured {
  border-color: #34455d;
  background:
    radial-gradient(circle at 80% 4%, rgba(86, 133, 203, .15), transparent 33%),
    linear-gradient(155deg, #121923, #0d1219);
  box-shadow: inset 0 1px 0 rgba(148,183,231,.08), 0 18px 65px rgba(0,0,0,.18);
}
.pricing-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pricing-card-top h3 { margin: 0; color: #f0f0f0; font-size: 22px; font-weight: 650; letter-spacing: -.035em; }
.pricing-card-top span {
  display: inline-flex;
  min-height: 25px;
  padding: 0 9px;
  border: 1px solid #2f3337;
  border-radius: 999px;
  color: #858b91;
  align-items: center;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.is-featured .pricing-card-top span { border-color: #38506d; background: rgba(51,78,111,.2); color: #82aee5; }
.pricing-card-desc { min-height: 70px; margin: 18px 0 0; color: #858b91; font-size: 13px; line-height: 1.55; }
.pricing-card-price { display: flex; margin: 37px 0 28px; align-items: baseline; gap: 7px; }
.pricing-card-price strong { color: #f2f2f2; font-size: 43px; font-weight: 650; letter-spacing: -.055em; }
.pricing-card-price span { color: #747b83; font-size: 12px; font-weight: 600; }
.pricing-home-card ul {
  display: flex;
  margin: 0 0 26px;
  padding: 25px 0 0;
  border-top: 1px solid #232629;
  list-style: none;
  flex-direction: column;
  gap: 13px;
}
.pricing-home-card li { position: relative; padding-left: 20px; color: #a1a7ad; font-size: 11px; line-height: 1.45; }
.pricing-home-card li::before { position: absolute; top: -.05em; left: 0; color: #68d8ad; content: "✓"; font-size: 14px; font-weight: 750; }
.pricing-card-action {
  display: inline-flex;
  width: 100%;
  min-height: 47px;
  margin-top: auto;
  padding: 0 15px;
  border: 1px solid #303438;
  border-radius: 12px;
  background: #141618;
  color: #e5e5e5;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 750;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}
.pricing-card-action:hover { border-color: #4a4f54; background: #1a1d20; color: #fff; }
.pricing-card-action-primary { border-color: #e8edf0; background: #edf2f5; color: #111; }
.pricing-card-action-primary:hover { border-color: #fff; background: #fff; color: #080808; }
.pricing-home-footer { display: flex; margin-top: 22px; align-items: center; justify-content: space-between; gap: 24px; }
.pricing-home-footer p { max-width: 610px; margin: 0; color: #737a80; font-size: 11px; line-height: 1.55; }
.pricing-home-footer .text-link { white-space: nowrap; }

.capability-section {
  position: relative;
  padding-bottom: clamp(52px, 5vw, 72px);
  border-top: 1px solid var(--line-soft);
  background:
    radial-gradient(circle at 80% 45%, rgba(92, 99, 166, .11), transparent 34%),
    linear-gradient(180deg, #090909, #0b0b0b 52%, #090909);
}

.graph-concept-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #8e8e8e;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.graph-concept-label::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #777;
  box-shadow: 0 0 0 4px rgba(255,255,255,.035);
  content: "";
}

.graph-concept-operating::before { background: #75b99c; }
.graph-concept-capability::before { background: #9ba8ff; }

.capability-heading { align-items: start; }
.capability-intro { max-width: 480px; }
.capability-intro p { margin: 0 0 23px; color: #b3b3b3; font-size: 17px; line-height: 1.65; }

.capability-stage {
  max-width: 1120px;
  margin: 0 auto;
  padding: 18px;
  overflow: hidden;
  border: 1px solid #2e2e2e;
  border-radius: 26px;
  background: linear-gradient(180deg, #121212, #0d0e11);
  box-shadow: 0 44px 110px rgba(0, 0, 0, .34);
}

.capability-stage-header {
  display: flex;
  min-height: 52px;
  padding: 2px 3px 16px;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.capability-stage-header span {
  color: #dfe2e8;
  font-size: 13px;
  font-weight: 680;
  letter-spacing: -.012em;
}

.capability-stage-header p {
  max-width: 470px;
  margin: 0;
  color: #767c86;
  font-size: 11px;
  line-height: 1.45;
  text-align: right;
}

.capability-sequence {
  display: grid;
  padding: 0 0 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 10px;
}

.capability-action {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 190px;
  padding: 20px;
  overflow: hidden;
  border: 1px solid #303030;
  border-radius: 17px;
  background: linear-gradient(145deg, #1a1a1a, #141414);
  color: inherit;
  cursor: pointer;
  flex-direction: column;
  gap: 17px;
  font: inherit;
  text-align: left;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.capability-action:hover { border-color: #4a4e58; transform: translateY(-2px); }
.capability-action:focus-visible { outline: 2px solid #8f9cff; outline-offset: 3px; }
.capability-action.is-active { transform: translateY(-2px); }
.capability-action-connect.is-active { border-color: #6478c6; background: linear-gradient(145deg, #22283d, #171a23); box-shadow: 0 14px 38px rgba(61, 76, 136, .18); }
.capability-action-acquire.is-active { border-color: #4e8b75; background: linear-gradient(145deg, #1b2b26, #151d1a); box-shadow: 0 14px 38px rgba(44, 100, 80, .16); }
.capability-action-build.is-active { border-color: #9a7d3e; background: linear-gradient(145deg, #2c271b, #1d1a14); box-shadow: 0 14px 38px rgba(121, 91, 34, .16); }

.capability-action::after {
  position: absolute;
  right: -38px;
  bottom: -60px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: rgba(255,255,255,.025);
  content: "";
}

.capability-action-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; }
.capability-action-top > i { display: grid; width: 34px; height: 34px; border: 1px solid #343946; border-radius: 10px; background: rgba(255,255,255,.035); color: #a0a7b4; place-items: center; font-size: 14px; font-style: normal; }
.capability-action-index { color: #7d838e; font-size: 11px; font-weight: 760; letter-spacing: .12em; }
.capability-action > div { position: relative; z-index: 1; }
.capability-action h3 { margin: 0; color: #f0f1f3; font-size: 23px; font-weight: 610; letter-spacing: -.035em; }
.capability-action p { max-width: 290px; margin: 9px 0 0; color: #969ba3; font-size: 12px; line-height: 1.55; }
.capability-action-status { position: relative; z-index: 1; display: inline-flex; width: max-content; margin-top: auto; color: #9298a2; align-items: center; gap: 7px; font-size: 11px; font-weight: 720; }
.capability-action-status::before { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(255,255,255,.035); content: ""; }
.capability-action-connect { border-color: #3e496f; background: linear-gradient(145deg, #1d2233, #15171d); }
.capability-action-connect .capability-action-status { color: #aebcff; }
.capability-action-connect .capability-action-top > i { border-color: #3f4d78; background: #222b45; color: #b8c3ff; }
.capability-action-acquire { border-color: #345348; }
.capability-action-acquire .capability-action-status { color: #7fc7a8; }
.capability-action-acquire .capability-action-top > i { border-color: #345c4f; background: #1a3029; color: #8bd4b5; }
.capability-action-build { border-color: #62573b; }
.capability-action-build .capability-action-status { color: #cfb971; }
.capability-action-build .capability-action-top > i { border-color: #665738; background: #302819; color: #e1c677; }
.capability-action-arrow { display: grid; color: #555; place-items: center; font-size: 14px; }

.capability-preview {
  height: 420px;
  overflow: hidden;
  border: 1px solid #292929;
  border-radius: 17px;
  background: #090d13;
}

.cap-demo-titlebar {
  display: flex;
  height: 41px;
  padding: 0 15px;
  border-bottom: 1px solid #252a33;
  background: #12151b;
  align-items: center;
  justify-content: space-between;
}
.cap-demo-titlebar > div { display: flex; color: #d8dce5; align-items: center; gap: 8px; font-size: 11px; }
.cap-demo-titlebar img { width: 22px; height: 22px; object-fit: contain; }
.cap-demo-titlebar > span { display: flex; color: #69707e; align-items: center; gap: 14px; font-size: 9px; }
.cap-demo-titlebar i { font-style: normal; }
.cap-demo-shell { display: grid; height: calc(100% - 41px); grid-template-columns: 54px minmax(0, 1fr); }
.cap-demo-sidebar { display: flex; padding: 12px 8px 9px; border-right: 1px solid #202630; background: #0c1016; align-items: center; flex-direction: column; gap: 9px; }
.cap-demo-sidebar img { width: 30px; height: 30px; margin-bottom: 3px; object-fit: contain; }
.cap-demo-sidebar button { display: grid; width: 32px; height: 32px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #737c8b; cursor: pointer; place-items: center; font: inherit; }
.cap-demo-sidebar button:hover,
.cap-demo-sidebar button.is-active { border-color: #303958; background: #1c2338; color: #aebaff; }
.cap-demo-sidebar span { flex: 1; }
.cap-demo-main { min-width: 0; padding: 21px 23px; background: radial-gradient(circle at 90% 10%, rgba(91,106,211,.11), transparent 35%), #0a0e14; }
.cap-demo-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.cap-demo-heading span { color: #778298; font-size: 9px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.cap-demo-heading h3 { margin: 4px 0 0; color: #f1f3f7; font-size: 23px; font-weight: 650; letter-spacing: -.035em; }
.cap-demo-heading p { margin: 4px 0 0; color: #7f8998; font-size: 10px; }
.cap-demo-count { display: grid; min-width: 62px; padding: 8px 10px; border: 1px solid #27303c; border-radius: 10px; background: #10151d; text-align: right; }
.cap-demo-count strong { color: #e9ecf2; font-size: 15px; }
.cap-demo-count span { color: #707a8b; font-size: 8px; letter-spacing: 0; text-transform: none; }
.cap-demo-filters { display: flex; margin-top: 15px; padding-bottom: 10px; border-bottom: 1px solid #202631; gap: 6px; }
.cap-demo-filters button { min-height: 30px; padding: 0 11px; border: 1px solid #28303a; border-radius: 9px; background: #10151c; color: #818b9a; cursor: pointer; font-family: inherit; font-size: 9px; font-weight: 600; line-height: 1; transition: border-color 150ms ease, background 150ms ease, color 150ms ease; }
.cap-demo-filters button:hover { border-color: #3a4555; color: #c8ced8; }
.cap-demo-filters button.is-active { border-color: #53639c; background: #222b47; color: #d9dfff; }
.cap-demo-grid { display: grid; margin-top: 11px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cap-demo-grid article { display: grid; min-width: 0; min-height: 96px; padding: 13px; border: 1px solid #242c36; border-radius: 12px; background: linear-gradient(145deg, #111720, #0e131a); grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; }
.cap-demo-grid article[hidden] { display: none; }
.cap-demo-grid .cap-demo-icon { display: grid; width: 30px; height: 30px; border: 1px solid #313b49; border-radius: 9px; background: #19202a; color: #aeb8c8; place-items: center; font-size: 9px; font-style: normal; font-weight: 750; }
.cap-demo-grid h4 { margin: 0; overflow: hidden; color: #d8dce4; font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.cap-demo-grid p { margin: 4px 0 0; overflow: hidden; color: #737e8e; font-size: 8.5px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.cap-demo-grid article > b { align-self: start; padding: 4px 6px; border: 1px solid #2d564b; border-radius: 999px; color: #68b99d; font-size: 7px; font-weight: 700; }
.cap-demo-grid article[data-capability-item="available"] > b { border-color: #3a4568; color: #9eace7; }
.cap-demo-grid article[data-capability-item="build"] { border-style: dashed; border-color: #5a4d31; }
.cap-demo-grid article[data-capability-item="build"] > b { border-color: #5a4d31; color: #d1b56e; }

.capability-thesis {
  max-width: 860px;
  margin: 24px auto 0;
  color: #d0d0d0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
}

.ecosystem-heading { max-width: 840px; }
.system-stack {
  padding-top: 140px;
  padding-bottom: 155px;
  background:
    radial-gradient(circle at 50% 15%, rgba(255,255,255,.045), transparent 27%),
    radial-gradient(circle at 75% 55%, rgba(88,101,170,.065), transparent 31%),
    #080808;
}

.ecosystem-chain {
  display: grid;
  max-width: 980px;
  margin: 0 auto 62px;
  padding: 10px;
  border: 1px solid #292929;
  border-radius: 999px;
  background: #111;
  grid-template-columns: auto 25px auto 25px auto 25px auto 25px auto;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.ecosystem-chain span {
  padding: 10px 14px;
  border-radius: 999px;
  color: #aaa;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

.ecosystem-chain b { color: #555; font-size: 12px; font-weight: 400; text-align: center; }
.ecosystem-chain .ecosystem-chain-result { background: #f0f0f0; color: #0b0b0b; }
.stack-flow { display: grid; max-width: 1120px; margin: 0 auto; }

.stack-hero-card,
.stack-pro1-card,
.stack-card,
.support-card {
  position: relative;
  overflow: hidden;
  border: 1px solid #292929;
  background: #131313;
}

.stack-hero-card {
  display: grid;
  min-height: 390px;
  border-radius: 22px;
  grid-template-columns: .72fr 1.28fr;
}

.stack-copy {
  display: flex;
  padding: 36px;
  flex-direction: column;
  justify-content: center;
}

.stack-order {
  color: #858585;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.stack-copy h3,
.stack-card-copy h3 {
  margin: 12px 0 0;
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: 1;
}

.stack-copy p,
.stack-card-copy p {
  margin: 17px 0 24px;
  color: #aaa;
  font-size: 15px;
  line-height: 1.62;
}

.stack-hero-art,
.stack-pro1-art,
.stack-card-art { position: relative; overflow: hidden; background: #0b0b0b; }

.stack-hero-art::after,
.stack-pro1-art::after,
.stack-card-art::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(19,19,19,.74), transparent 40%);
  content: "";
  pointer-events: none;
}

.stack-hero-art img,
.stack-pro1-art img,
.stack-card-art img {
  width: 100%;
  height: 100%;
  filter: saturate(.75) contrast(1.04);
  object-fit: cover;
  transition: transform 700ms cubic-bezier(.2,.7,.2,1);
}

.stack-hero-art img { object-position: 31% top; }
.stack-hero-card:hover img,
.stack-pro1-card:hover img,
.stack-card:hover img { transform: scale(1.018); }

.stack-connector {
  display: grid;
  height: 72px;
  color: #777;
  grid-template-rows: 1fr auto 1fr;
  justify-items: center;
}

.stack-connector span { width: 1px; background: #333; }
.stack-connector b { font-size: 13px; font-weight: 400; }

.stack-pro1-card {
  display: grid;
  min-height: 0;
  border-radius: 22px;
  color: inherit;
  grid-template-columns: 1fr;
}

.stack-pro1-card .stack-copy {
  max-width: 760px;
  min-height: 0;
  padding-top: 30px;
  padding-bottom: 30px;
}

.stack-pro1-art::after { background: linear-gradient(90deg, rgba(19,19,19,.72), transparent 48%); }

.stack-authority-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.stack-authority-grid.stack-authority-single { grid-template-columns: 1fr; }

.stack-authority-grid .stack-pro1-card,
.stack-authority-card {
  min-height: 355px;
}

.stack-authority-card {
  overflow: hidden;
  border: 1px solid #34433e;
  border-radius: 22px;
  background: linear-gradient(145deg, #14201d, #111514);
}

.status-chip {
  display: inline-flex;
  width: max-content;
  margin-top: auto;
  padding: 7px 10px;
  border: 1px solid #3d4a46;
  border-radius: 999px;
  color: #9fd2bc;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
}

.status-boundary { border-color: #4a4560; color: #b8b0e5; }

.stack-supply-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.stack-card {
  display: grid;
  min-height: 500px;
  border-radius: 18px;
  color: inherit;
  grid-template-rows: 230px 1fr;
}

.stack-card-art { border-bottom: 1px solid #292929; }
.stack-card-art::after { background: linear-gradient(180deg, transparent 60%, rgba(19,19,19,.72)); }
.stack-card-copy { display: flex; padding: 27px; flex-direction: column; }
.stack-card-copy h3 { font-size: 25px; line-height: 1.08; }
.stack-card-copy p { margin-top: 13px; font-size: 14px; }
.stack-card-copy .text-link { margin-top: auto; }

.stack-card-text {
  min-height: 500px;
  grid-template-rows: 1fr;
}

.stack-card-text .stack-card-copy { min-height: 100%; }
.stack-card-compute { border-color: #33454a; background: linear-gradient(145deg, #111c20, #111414); }

.compute-paths {
  display: grid;
  margin-top: auto;
  grid-template-columns: 1fr;
  gap: 8px;
}

.compute-paths > span,
.compute-paths > a {
  display: flex;
  padding: 13px 14px;
  border: 1px solid #314044;
  border-radius: 11px;
  background: rgba(255,255,255,.025);
  color: inherit;
  flex-direction: column;
  gap: 4px;
}

.compute-paths b { font-size: 13px; font-weight: 650; }
.compute-paths small { color: #8e9b9f; font-size: 12px; }

.vision-badge {
  position: absolute;
  z-index: 2;
  top: 15px;
  right: 15px;
  padding: 6px 9px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: rgba(8,8,8,.72);
  color: #d4d4d4;
  backdrop-filter: blur(8px);
  font-size: 12px;
  font-weight: 700;
}

.support-grid {
  display: grid;
  margin-top: 12px;
  grid-template-columns: 1.45fr .78fr .78fr;
  gap: 12px;
}

.support-grid-expanded { grid-template-columns: 1.3fr repeat(2, 1fr); }

.support-card {
  display: grid;
  min-height: 154px;
  padding: 23px;
  border-radius: 16px;
  color: inherit;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 15px;
  transition: border-color 150ms ease, background 150ms ease;
}

.support-card:hover { border-color: #454545; background: #181818; }
.support-card-featured { border-color: #3f4666; background: #161925; }
.support-card-featured { box-shadow: inset 0 1px 0 rgba(157,170,255,.06); }
.support-card-featured h3 { max-width: 390px; font-size: 17px; line-height: 1.25; }
.support-card > span:last-child { color: #777; }
.support-icon { display: grid; width: 35px; height: 35px; border: 1px solid #333; border-radius: 10px; color: #aaa; place-items: center; font-size: 12px; font-weight: 700; }
.support-card h3 { margin: 1px 0 0; font-size: 15px; font-weight: 600; }
.support-card p { margin: 8px 0 0; color: #999; font-size: 13px; line-height: 1.5; }
.support-status { display: inline-block; margin-top: 12px; color: #9ba8d6; font-size: 12px; font-weight: 700; }

.evidence-boundary {
  border-top: 1px solid var(--line-soft);
  background:
    radial-gradient(circle at 15% 10%, rgba(89, 108, 170, .08), transparent 29%),
    #0a0a0a;
}

.evidence-heading { align-items: end; }
.evidence-heading > p { max-width: 530px; }
.evidence-flow {
  display: grid;
  margin-top: 52px;
  overflow: hidden;
  border: 1px solid #292929;
  border-radius: 20px;
  background: #111;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.evidence-flow article { min-height: 260px; padding: 26px; border-left: 1px solid #292929; }
.evidence-flow article:first-child { border-left: 0; }
.evidence-flow article > span { color: #727272; font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.evidence-flow h3 { margin: 62px 0 0; font-size: 17px; font-weight: 600; letter-spacing: -.025em; }
.evidence-flow p { margin: 12px 0 0; color: #9f9f9f; font-size: 13px; line-height: 1.58; }

.status-legend {
  display: grid;
  margin-top: 12px;
  padding: 18px;
  border: 1px solid #292929;
  border-radius: 15px;
  background: #111;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.status-legend > span { display: flex; padding: 7px 10px; flex-direction: column; gap: 6px; }
.status-legend b { color: #d3d3d3; font-size: 13px; }
.status-legend small { color: #8f8f8f; font-size: 12px; line-height: 1.5; }
.evidence-links { display: flex; margin-top: 22px; flex-wrap: wrap; gap: 26px; }

@media (max-width: 1050px) {
  .product-header-inner { flex-wrap: nowrap; padding-top: 0; gap: 12px; }
  .product-nav { order: 0; width: auto; padding-bottom: 0; flex: 1 1 auto; }
  .product-nav a { min-height: 40px; white-space: nowrap; }
  .execution-chain { grid-template-columns: repeat(3, 1fr); gap: 9px; }
  .execution-result { transform: none; }
  .execution-arrow { display: none; }
  .use-case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scenario-demo { grid-template-columns: 270px minmax(0, 1fr); }
  .pricing-home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stack-flow { max-width: 900px; }
  .capability-action { min-height: 180px; }
}

@media (max-width: 800px) {
  .product-header-inner {
    width: min(100% - 32px, var(--max));
    padding-top: 0;
    gap: 8px;
  }

  .product-brand { margin-right: 0; }
  .header-signin { display: none; }
  .page-language {
    width: 76px;
    min-width: 76px;
    height: 44px;
    padding: 0 25px 0 34px;
    background-position: left 12px center, right 10px center;
  }
  .header-download { min-height: 44px; padding: 0 14px; }

  .product-nav {
    display: flex;
    width: auto;
    min-width: 0;
    padding: 0;
    overflow-x: auto;
    flex: 1 1 auto;
    justify-content: flex-start;
    gap: 4px;
    scrollbar-width: none;
  }

  .product-nav::-webkit-scrollbar { display: none; }

  .product-nav button,
  .product-nav a {
    min-width: max-content;
    min-height: 40px;
    padding-inline: 12px;
    flex: 0 0 auto;
    justify-content: center;
    font-size: 12px;
    white-space: nowrap;
  }

  .team-brief { flex-direction: column; }
  .team-streams { grid-template-columns: 1fr; }
  .use-case-grid { grid-template-columns: 1fr; }
  .scenario-demo { min-height: 0; grid-template-columns: 1fr; }
  .scenario-sidebar { padding: 12px; border-right: 0; border-bottom: 1px solid #2a2a2a; }
  .scenario-window-bar { height: 24px; }
  .scenario-search,
  .scenario-user { display: none; }
  .scenario-tabs { display: flex; margin-top: 9px; padding-bottom: 5px; overflow-x: auto; flex-direction: row; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #444 transparent; }
  .scenario-tab { min-height: 68px; flex: 0 0 250px; scroll-snap-align: start; }
  .scenario-tab:hover { transform: translateY(-1px); }
  .scenario-panel { min-height: 650px; }

  .capability-sequence {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .capability-action { min-height: 0; padding: 17px; }
  .capability-action p { max-width: 560px; }
  .capability-action-arrow { min-height: 18px; transform: rotate(90deg); }

  .ecosystem-chain {
    display: flex;
    margin-bottom: 42px;
    overflow-x: auto;
    border-radius: 15px;
    justify-content: flex-start;
    scrollbar-width: none;
  }

  .ecosystem-chain::-webkit-scrollbar { display: none; }
}

@media (max-width: 960px) {
  .stack-hero-card,
  .stack-pro1-card { grid-template-columns: 1fr; }
  .stack-hero-card { grid-template-rows: auto 390px; }
  .stack-pro1-card { grid-template-rows: auto; }
  .stack-supply-grid { grid-template-columns: 1fr; }
  .stack-card { min-height: 0; grid-template-columns: .8fr 1.2fr; grid-template-rows: 360px; }
  .stack-card-text { min-height: 360px; grid-template-columns: 1fr; grid-template-rows: 1fr; }
  .stack-authority-grid { grid-template-columns: 1fr; }
  .support-grid { grid-template-columns: 1fr; }
  .capability-preview { height: 370px; }
  .evidence-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .evidence-flow article:nth-child(3) { border-top: 1px solid #292929; border-left: 0; }
  .evidence-flow article:nth-child(4) { border-top: 1px solid #292929; }
}

@media (min-width: 621px) and (max-width: 800px) {
  .capability-sequence {
    display: flex;
    padding: 0 0 12px;
    overflow-x: auto;
    gap: 10px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .capability-sequence::-webkit-scrollbar { display: none; }
  .capability-action {
    min-height: 190px;
    flex: 0 0 min(70vw, 480px);
    scroll-snap-align: start;
  }
  .capability-action-arrow { display: none; }

  .ecosystem-chain {
    display: grid;
    overflow: visible;
    border-radius: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }
  .ecosystem-chain b { display: none; }
  .ecosystem-chain span { background: #171717; text-align: center; }
  .ecosystem-chain .ecosystem-chain-result { grid-column: 1 / -1; }

  .stack-hero-card { grid-template-rows: auto 300px; }
  .stack-pro1-card { grid-template-rows: auto; }
  .stack-supply-grid,
  .support-grid {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .stack-supply-grid::-webkit-scrollbar,
  .support-grid::-webkit-scrollbar { display: none; }
  .stack-card {
    min-height: 455px;
    grid-template-columns: 1fr;
    grid-template-rows: 220px auto;
    flex: 0 0 min(72vw, 520px);
    scroll-snap-align: start;
  }
  .stack-card-text { grid-template-rows: 1fr; }
  .stack-card-copy { min-height: 235px; }
  .support-card {
    min-height: 160px;
    flex: 0 0 min(70vw, 480px);
    scroll-snap-align: start;
  }
  .capability-sequence,
  .stack-supply-grid,
  .support-grid { padding-bottom: 12px; scrollbar-width: thin; scrollbar-color: #505050 transparent; }
  .capability-sequence::-webkit-scrollbar,
  .stack-supply-grid::-webkit-scrollbar,
  .support-grid::-webkit-scrollbar { display: block; height: 4px; }
  .capability-sequence::-webkit-scrollbar-thumb,
  .stack-supply-grid::-webkit-scrollbar-thumb,
  .support-grid::-webkit-scrollbar-thumb { border-radius: 999px; background: #505050; }
}

@media (max-width: 620px) {
  .hero-index3 h1 { max-width: 380px; font-size: clamp(40px, 11.4vw, 54px); line-height: 1; overflow-wrap: normal; }
  .hero-index3 .hero-lead { max-width: 350px; font-size: 16px; line-height: 1.55; }
  .hero-index3 { min-height: 0; padding-top: 46px; }
  .hero-index3 .hero-product { margin-top: 34px; }
  .hero-index3 .window-frame { box-shadow: 0 24px 70px rgba(0,0,0,.4); }
  .hero-assurance { max-width: 360px; margin-top: 21px; font-size: 12px; text-align: center; }
  .orchestration,
  .control,
  .proof,
  .use-cases,
  .capability-section,
  .evidence-boundary,
  .pricing-home,
  .developers,
  .system-stack { padding-top: 78px; padding-bottom: 78px; }
  .work-context { padding-top: 86px; padding-bottom: 86px; }
  .final-cta { padding-top: 82px; padding-bottom: 82px; }
  .section-heading > p,
  .section-heading > div > p,
  .proof-side p,
  .developers-copy > p,
  .final-inner > p { font-size: 14.5px; }
  .section-heading h2,
  .context-copy h2,
  .developers-copy h2,
  .final-inner h2 { line-height: 1.08; overflow-wrap: normal; }
  .control-card p { font-size: 14px; }
  .context-lead { font-size: 15px; }
  .use-case-grid { margin-top: 32px; grid-template-columns: 1fr; }
  .use-case-card { min-height: 250px; padding: 23px; }
  .use-case-card h3 { margin-top: 45px; }
  .example-disclaimer { text-align: left; }
  .scenario-demo { border-radius: 16px; }
  .scenario-sidebar { padding: 9px; }
  .scenario-window-bar { padding: 0 5px; }
  .scenario-tab { min-height: 61px; padding: 8px; flex-basis: 220px; }
  .scenario-tab .scenario-avatar { width: 34px; height: 34px; }
  .scenario-tab small { margin-top: 4px; }
  .scenario-panel { min-height: 620px; }
  .scenario-panel-header { min-height: 61px; padding: 0 14px; }
  .scenario-runtime { padding: 0 8px; }
  .scenario-runtime b { display: none; }
  .scenario-thread { padding: 18px 14px 16px; gap: 10px; }
  .scenario-brief { padding: 16px; border-radius: 13px; }
  .scenario-brief p { font-size: 12px; }
  .scenario-system-note { font-size: 9px; }
  .scenario-message { padding: 12px 14px; border-radius: 13px; }
  .scenario-checklist { padding: 13px 14px; }
  .scenario-result-card { grid-template-columns: 1fr; padding: 15px; }
  .scenario-result-card strong,
  .scenario-result-card small { grid-row: auto; grid-column: 1; max-width: none; text-align: left; }
  .scenario-composer { min-height: 44px; margin: 0 12px 12px; }
  .pricing-home-grid {
    display: flex;
    padding-bottom: 12px;
    overflow-x: auto;
    gap: 9px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: #505050 transparent;
  }
  .pricing-home-card { min-height: 500px; padding: 22px; flex: 0 0 min(84vw, 330px); scroll-snap-align: start; }
  .pricing-card-desc { min-height: 0; }
  .pricing-card-price { margin-top: 30px; }
  .pricing-home-footer { align-items: flex-start; flex-direction: column; }
  .execution-chain { padding: 9px; grid-template-columns: 1fr 1fr; gap: 7px; }
  .execution-node { min-height: 96px; padding: 14px; }
  .execution-principle { font-size: 14px; }
  .capability-intro p { font-size: 15px; }
  .control-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .control-card,
  .control-card:nth-child(n) {
    min-height: 248px;
    padding: 19px;
    border-top: 1px solid #292929;
    border-left: 1px solid #292929;
  }
  .control-card:nth-child(-n+2) { border-top: 0; }
  .control-card:nth-child(odd) { border-left: 0; }
  .control-card h3 { margin-top: 28px; font-size: 16px; }
  .control-card p { font-size: 13px; line-height: 1.5; }

  .capability-stage { padding: 9px; border-radius: 15px; }
  .capability-stage-header { padding: 5px 6px 14px; align-items: flex-start; flex-direction: column; gap: 6px; }
  .capability-stage-header p { max-width: 360px; font-size: 10px; text-align: left; }
  .capability-sequence {
    display: flex;
    padding: 0 0 9px;
    overflow-x: auto;
    gap: 8px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .capability-sequence::-webkit-scrollbar { display: none; }
  .capability-action {
    min-height: 208px;
    flex: 0 0 min(82vw, 300px);
    scroll-snap-align: start;
  }
  .capability-action:hover,
  .capability-action.is-active { transform: none; }
  .capability-action-arrow { display: none; }
  .capability-preview { height: 510px; border-radius: 10px; }
  .cap-demo-sidebar { display: none; }
  .cap-demo-shell { grid-template-columns: 1fr; }
  .cap-demo-main { padding: 15px 13px; }
  .cap-demo-heading h3 { font-size: 19px; }
  .cap-demo-heading p { max-width: 190px; }
  .cap-demo-filters { overflow-x: auto; scrollbar-width: none; }
  .cap-demo-filters::-webkit-scrollbar { display: none; }
  .cap-demo-filters button { flex: 0 0 auto; }
  .cap-demo-grid { grid-template-columns: 1fr; }
  .cap-demo-grid article { min-height: 76px; }
  .capability-thesis { margin-top: 22px; font-size: 16px; text-align: left; }
  .stack-hero-card,
  .stack-pro1-card,
  .stack-authority-card { border-radius: 15px; }
  .ecosystem-chain {
    display: grid;
    overflow: visible;
    padding: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .ecosystem-chain b { display: none; }
  .ecosystem-chain span {
    padding: 10px 8px;
    background: #171717;
    text-align: center;
  }
  .ecosystem-chain .ecosystem-chain-result { grid-column: 1 / -1; }

  .stack-hero-card { grid-template-rows: auto 205px; }
  .stack-pro1-card { grid-template-rows: auto; }
  .stack-pro1-card .stack-copy { min-height: 0; padding-top: 22px; padding-bottom: 22px; }
  .stack-copy { padding: 22px; }
  .stack-copy h3 { font-size: 28px; }
  .stack-supply-grid,
  .support-grid {
    display: flex;
    overflow-x: auto;
    gap: 9px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .stack-supply-grid::-webkit-scrollbar,
  .support-grid::-webkit-scrollbar { display: none; }
  .stack-card {
    min-height: 425px;
    border-radius: 15px;
    grid-template-columns: 1fr;
    grid-template-rows: 185px auto;
    flex: 0 0 min(84vw, 310px);
    scroll-snap-align: start;
  }
  .stack-card-text { min-height: 425px; grid-template-rows: 1fr; }
  .stack-card-copy { min-height: 230px; padding: 21px; }
  .stack-card-copy h3 { font-size: 23px; }
  .support-grid { margin-top: 9px; }
  .support-card {
    min-height: 170px;
    padding: 18px;
    flex: 0 0 min(84vw, 310px);
    scroll-snap-align: start;
  }
  .capability-sequence,
  .stack-supply-grid,
  .support-grid { padding-bottom: 12px; scrollbar-width: thin; scrollbar-color: #505050 transparent; }
  .capability-sequence::-webkit-scrollbar,
  .stack-supply-grid::-webkit-scrollbar,
  .support-grid::-webkit-scrollbar { display: block; height: 4px; }
  .capability-sequence::-webkit-scrollbar-thumb,
  .stack-supply-grid::-webkit-scrollbar-thumb,
  .support-grid::-webkit-scrollbar-thumb { border-radius: 999px; background: #505050; }
  .evidence-flow { grid-template-columns: 1fr; border-radius: 15px; }
  .evidence-flow article,
  .evidence-flow article:nth-child(n) { min-height: 220px; border-top: 1px solid #292929; border-left: 0; }
  .evidence-flow article:first-child { border-top: 0; }
  .evidence-flow h3 { margin-top: 42px; }
  .status-legend { grid-template-columns: 1fr; }
  .stack-connector { height: 44px; }
}

@media (max-width: 520px) {
  .product-nav {
    display: flex;
  }

  .product-nav button,
  .product-nav a { min-height: 40px; }

  .product-brand span,
  .header-download span { display: none; }
  .header-download { width: 44px; min-width: 44px; padding: 0; }
  .page-language { width: 72px; min-width: 72px; }
  .product-header-actions { gap: 6px; }
}

@media (max-width: 360px) {
  .control-grid { grid-template-columns: 1fr; }
  .control-card,
  .control-card:nth-child(n) {
    min-height: 188px;
    border-top: 1px solid #292929;
    border-left: 0;
  }
  .control-card:first-child { border-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .stack-hero-card img,
  .stack-pro1-card img,
  .stack-card img { transform: none !important; }
}

/* PromanOS desktop demo — aligned with the current Desktop shell. */
.promanos-demo {
  position: relative;
  display: block;
  width: 100%;
  height: clamp(700px, 61vw, 830px);
  min-height: 0;
  overflow: hidden;
  border: 1px solid #252b35;
  border-radius: 22px;
  background: #0b0f14;
  color: #e7ebf2;
  box-shadow: 0 38px 120px rgba(0, 0, 0, .48);
  isolation: isolate;
  container-name: promanos-workspace;
  container-type: inline-size;
}

.demo-titlebar {
  position: relative;
  z-index: 30;
  display: flex;
  height: 34px;
  padding: 0 11px 0 14px;
  border-bottom: 1px solid #171c24;
  background: #0a0d12;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}
.demo-titlebar > div { display: flex; align-items: center; gap: 8px; }
.demo-titlebar img { width: 18px; height: 18px; border-radius: 5px; }
.demo-titlebar strong { color: #9da6b5; font-size: 10px; font-weight: 650; }
.demo-window-actions { display: flex; height: 100%; align-items: center; }
.demo-window-actions i { display: grid; width: 32px; height: 100%; color: #67707e; place-items: center; font-size: 10px; font-style: normal; }

.demo-splash {
  position: absolute;
  z-index: 20;
  inset: 34px 0 0;
  display: block;
  padding: 0;
  overflow: hidden;
  background: #070910;
  isolation: isolate;
  transition: opacity 520ms ease, visibility 520ms ease, transform 620ms ease;
}
.demo-splash.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; transform: scale(1.004); }
.demo-splash-photo { position: absolute; z-index: 0; inset: -2%; background: #080b12 url("assets/splash-business-ai.png") 60% center / cover no-repeat; opacity: .48; transform: scale(1.025); animation: demo-splash-photo-drift 12s cubic-bezier(.2,.6,.3,1) both; }
.demo-splash::before { position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, rgba(5,7,13,.97) 0%, rgba(5,7,13,.9) 37%, rgba(6,8,15,.64) 66%, rgba(6,8,15,.76) 100%), linear-gradient(0deg, rgba(4,6,11,.74), transparent 56%); content: ""; }
.demo-splash::after { position: absolute; z-index: 1; inset: 0; background: radial-gradient(circle at 30% 48%, rgba(95,112,238,.12), transparent 32%); content: ""; animation: demo-splash-ambient 5.5s ease-in-out infinite alternate; }
.demo-splash-inner { position: relative; z-index: 2; display: grid; width: min(calc(100% - 58px), 1080px); height: 100%; margin: 0 auto; place-items: center start; }
.demo-splash-panel { display: grid; width: min(430px, 100%); margin-left: clamp(0px, 4vw, 48px); gap: 30px; animation: demo-splash-panel-in 620ms cubic-bezier(.2,.75,.25,1) both; }
.demo-splash-brand { display: flex; margin: 0; align-items: center; gap: 13px; color: rgba(241,243,249,.9); }
.demo-splash-brand > span { display: grid; width: 50px; height: 50px; overflow: hidden; border: 1px solid rgba(145,157,255,.22); border-radius: 15px; background: rgba(12,15,24,.78); box-shadow: 0 14px 42px rgba(0,0,0,.28), 0 0 26px rgba(102,119,238,.1); place-items: center; }
.demo-splash-brand img { width: 50px; height: 50px; border-radius: 0; box-shadow: none; object-fit: contain; }
.demo-splash-brand b { color: rgba(241,243,249,.9); font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.demo-splash-content { display: grid; gap: 13px; }
.demo-splash-kicker { display: flex; margin: 0; color: #9aa9ff; align-items: center; gap: 9px; font-size: 9px; font-weight: 750; letter-spacing: .15em; text-transform: uppercase; }
.demo-splash-kicker::before { width: 6px; height: 6px; border-radius: 50%; background: #57d6ae; box-shadow: 0 0 0 5px rgba(87,214,174,.09); content: ""; }
.demo-splash h3 { max-width: none; margin: 0; color: #f8f9fc; font-size: clamp(28px, 3.3vw, 38px); font-weight: 640; letter-spacing: -.035em; line-height: 1.12; }
.demo-splash h3 span { display: block; margin-top: 9px; color: rgba(230,234,243,.72); font-size: .54em; font-weight: 560; letter-spacing: -.025em; line-height: 1.18; }
.demo-splash-description { max-width: 390px; margin: 0; color: rgba(205,212,224,.72); font-size: 11px; line-height: 1.6; }
.demo-splash-check { display: flex; min-width: 0; margin-top: 8px; color: rgba(177,185,199,.68); align-items: center; gap: 9px; font-size: 9px; line-height: 18px; }
.demo-splash-check i { display: grid; width: 17px; height: 17px; flex: 0 0 17px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; place-items: center; font-size: 9px; font-style: normal; }
.demo-splash-check.is-checking { color: rgba(241,243,248,.9); }
.demo-splash-check.is-checking i { border-color: rgba(124,141,245,.65); border-top-color: transparent; animation: demo-splash-spin 720ms linear infinite; }
.demo-splash-check.is-done { color: rgba(217,224,234,.82); }
.demo-splash-check.is-done i { border-color: rgba(87,214,174,.48); color: #57d6ae; background: rgba(87,214,174,.1); }
.demo-splash-check.is-done i::before { content: "✓"; }
.demo-splash-progress { width: 100%; }
.demo-splash-progress-row { display: flex; margin-bottom: 10px; color: rgba(218,223,232,.78); align-items: center; justify-content: space-between; gap: 16px; font-size: 9px; }
.demo-splash-progress-row strong { color: #f7f8fa; font-size: 10px; font-weight: 650; }
.demo-splash-track { height: 3px; overflow: hidden; border-radius: 999px; background: rgba(184,194,220,.1); }
.demo-splash-track i { display: block; width: 3%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #6479ee, #94a2ff); box-shadow: 0 0 18px rgba(112,130,246,.5); transition: width 420ms cubic-bezier(.2,.75,.25,1); }
@keyframes demo-splash-spin { to { transform: rotate(360deg); } }
@keyframes demo-splash-panel-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes demo-splash-photo-drift { from { transform: scale(1.04) translate3d(0,0,0); } to { transform: scale(1.015) translate3d(-.4%,.25%,0); } }
@keyframes demo-splash-ambient { from { opacity: .56; transform: scale(.98); } to { opacity: 1; transform: scale(1.03); } }

.demo-shell {
  display: grid;
  height: calc(100% - 34px);
  min-height: 0;
  grid-template-columns: 54px 292px minmax(0, 1fr);
  background: #0b0f14;
  opacity: 1;
  transition: opacity 300ms ease;
}
.demo-shell[aria-hidden="true"] { opacity: .2; }
.demo-rail { display: flex; min-height: 0; padding: 10px 6px; border-right: 1px solid #202630; background: #0c1117; align-items: center; flex-direction: column; gap: 7px; }
.demo-rail button { display: grid; width: 39px; height: 39px; padding: 0; border: 0; border-radius: 11px; background: transparent; color: #697485; cursor: pointer; place-items: center; font-size: 16px; }
.demo-rail button:hover, .demo-rail button.is-active { background: #171e29; color: #cbd3df; }
.demo-rail button.is-active { box-shadow: inset 2px 0 #7784ff; }
.demo-rail img { width: 28px; height: 28px; border-radius: 8px; }
.demo-rail > i { width: 22px; height: 1px; margin: 4px 0; background: #202630; }
.demo-rail > span { flex: 1; }

.promanos-demo .scenario-sidebar.demo-business-nav { display: flex; min-width: 0; padding: 0; border-right: 1px solid #252b35; background: #10151c; flex-direction: column; }
.demo-business-header { display: grid; min-height: 64px; padding: 10px 11px; border-bottom: 1px solid #1e252e; grid-template-columns: 36px minmax(0, 1fr) 30px; align-items: center; gap: 9px; }
.demo-business-header > img { width: 34px; height: 34px; border-radius: 10px; }
.demo-business-header > span { min-width: 0; }
.demo-business-header b, .demo-business-header small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-business-header b { color: #e5e9ef; font-size: 12px; font-weight: 680; }
.demo-business-header small { margin-top: 4px; color: #697483; font-size: 9px; }
.demo-business-header button { width: 29px; height: 29px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #707b8a; font-size: 18px; }
.demo-business-header button:hover { background: #1a212b; color: #d9dee7; }
.promanos-demo .scenario-search { display: grid; min-height: 40px; margin: 10px 10px 8px; padding: 0 9px; border-color: #2a323d; border-radius: 10px; background: #151b23; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 7px; }
.promanos-demo .scenario-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #d9dee7; font: inherit; font-size: 10px; }
.promanos-demo .scenario-search input::placeholder { color: #697382; }
.promanos-demo .scenario-search kbd { padding: 2px 5px; border: 1px solid #303946; border-radius: 5px; color: #6e7887; font-size: 8px; }
.demo-nav-scroll { min-height: 0; padding: 0 7px 12px; overflow: auto; flex: 1; scrollbar-width: thin; scrollbar-color: #313a46 transparent; }
.demo-nav-group { margin-top: 5px; }
.demo-group-toggle { display: grid; width: 100%; min-height: 34px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: #7c8796; cursor: pointer; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: 6px; text-align: left; }
.demo-group-toggle:hover { background: #151c25; color: #aab3c0; }
.demo-group-toggle span { font-size: 10px; transition: transform 160ms ease; }
.demo-group-toggle[aria-expanded="false"] span { transform: rotate(-90deg); }
.demo-group-toggle b { font-size: 10px; font-weight: 680; }
.demo-group-toggle i { color: #596473; font-size: 13px; font-style: normal; }
.demo-group-content { display: grid; gap: 2px; }
.demo-group-toggle[aria-expanded="false"] + .demo-group-content { display: none; }
.demo-group-content > button { display: grid; width: 100%; min-height: 38px; padding: 6px 8px 6px 24px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #909aa8; cursor: pointer; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 7px; text-align: left; }
.demo-group-content > button[hidden] { display: none; }
.demo-group-content > button.is-created { animation: story-agent-arrive 420ms cubic-bezier(.2,.72,.22,1) both; }
.demo-group-content > button:hover { background: #161d26; color: #d1d7e0; }
.demo-group-content > button > span:first-child { display: grid; width: 20px; height: 20px; border-radius: 6px; background: #1b2330; place-items: center; font-size: 9px; }
.demo-group-content > button > b { overflow: hidden; font-size: 9px; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
.story-agent-list { padding: 2px 3px 5px; gap: 2px; }
.story-agent-list > button { min-height: 52px; padding: 5px 6px; border-radius: 10px; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; }
.story-agent-list > button[hidden] { display: none; }
.story-agent-list > button.is-created { animation: story-agent-arrive 420ms cubic-bezier(.2,.72,.22,1) both; }
.story-agent-list > button.is-updated { background: rgba(112,128,245,.1); }
.story-agent-list > button.is-updated .story-agent-copy small { color: #aeb8c8; }
.story-agent-list > button > .story-agent-avatar { position: relative; display: block; width: 32px; height: 32px; border-radius: 50%; background: #56c6b1; overflow: visible; }
.story-agent-avatar > i { position: absolute; top: 5px; right: 7px; width: 3px; height: 8px; border-radius: 3px; background: #10161e; transform: rotate(-21deg); }
.story-agent-avatar-inbox { border-radius: 11px 18px 12px 18px !important; background: #7867f2 !important; transform: rotate(-4deg); }
.story-agent-avatar-inbox > i { top: 6px; right: 8px; height: 7px; transform: rotate(-17deg); }
.story-agent-avatar-inbox > em { position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; border: 2px solid #10161e; border-radius: 50%; background: #ff5265; }
.story-agent-avatar-research { background: #367ef0 !important; }
.story-agent-avatar-content { border-radius: 48% 52% 44% 56% !important; background: #ff852f !important; }
.story-agent-copy { display: block; min-width: 0; }
.story-agent-copy b, .story-agent-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-agent-copy b { color: #d9dfe7; font-size: 8.5px; font-weight: 680; }
.story-agent-copy small { margin-top: 4px; color: #707b89; font-size: 7.25px; transition: color 180ms ease; }
.story-agent-list time { align-self: start; padding-top: 4px; color: #626d7b; font-size: 7px; white-space: nowrap; }
@keyframes story-agent-arrive { from { opacity: 0; transform: translateY(7px) scale(.98); } to { opacity: 1; transform: none; } }
.promanos-demo .scenario-tabs { display: grid; margin: 0; padding: 0; overflow: visible; gap: 2px; }
.promanos-demo .scenario-tab { min-height: 49px; padding: 6px 8px; border-radius: 10px; color: #8d97a5; grid-template-columns: 27px minmax(0, 1fr); gap: 8px; }
.promanos-demo .scenario-tab:hover { background: #161d26; color: #d1d7e0; transform: none; }
.promanos-demo .scenario-tab.is-active { border-color: #36425a; background: #202940; color: #eef1f6; box-shadow: inset 2px 0 #7784ff; }
.promanos-demo .scenario-tab .scenario-avatar { width: 27px; height: 27px; border-radius: 8px; color: #0a0e13; font-size: 8px; }
.promanos-demo .scenario-tab b { font-size: 9px; }
.promanos-demo .scenario-tab small { margin-top: 3px; color: #687383; font-size: 8px; }
.demo-add-section { display: flex; min-height: 39px; padding: 0 14px; border: 0; border-top: 1px solid #202731; background: #0d1218; color: #707b89; cursor: pointer; align-items: center; gap: 8px; font-size: 9px; text-align: left; }
.demo-add-section b { font-weight: 600; }

.promanos-demo .scenario-workspace.demo-main { position: relative; display: flex; min-width: 0; min-height: 0; background: #0b0f14; flex-direction: column; }
.demo-conversation-header { position: relative; z-index: 15; display: flex; min-height: 64px; padding: 0 13px; border-bottom: 1px solid #222a34; background: rgba(12,17,23,.97); align-items: center; justify-content: space-between; gap: 14px; backdrop-filter: blur(16px); }
.demo-header-leading { display: flex; min-width: 0; align-items: center; gap: 8px; }
.demo-header-copy { min-width: 0; }
.demo-header-copy b, .demo-header-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-header-copy b { color: #edf0f5; font-size: 11px; font-weight: 720; letter-spacing: -.01em; }
.demo-header-copy small { margin-top: 2px; color: #6e7886; font-size: 7.5px; }
.demo-header-copy .demo-header-breadcrumb { height: 10px; margin: 0 0 1px; color: #8c96a5; font-size: 7px; }
.demo-header-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 4px; }
.demo-header-leading > button, .demo-header-actions > button, .demo-header-language > button { display: grid; width: 31px; height: 31px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #7e8997; cursor: pointer; place-items: center; }
.demo-header-leading > button:hover, .demo-header-actions > button:hover, .demo-header-language > button:hover, .demo-header-actions > button[aria-expanded="true"], .demo-header-language > button[aria-expanded="true"] { background: #171e27; color: #edf0f5; }
.demo-conversation-header button svg, .demo-header-popovers svg, .demo-call-overlay svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.demo-header-avatar { position: relative; width: 36px !important; height: 36px !important; overflow: visible; border-radius: 10px !important; }
.demo-header-avatar img { width: 32px; height: 32px; border-radius: 9px; }
.demo-header-avatar > i { position: absolute; right: 0; bottom: 0; width: 8px; height: 8px; border: 2px solid #0c1117; border-radius: 50%; background: #58d4a8; }
.demo-header-back[hidden], .demo-mobile-nav { display: none; }
.demo-header-actions .demo-language-chip { display: flex; width: auto; min-width: 49px; padding: 0 7px; border: 1px solid #29323e; border-radius: 9px; color: #a4aebb; align-items: center; gap: 4px; font-size: 8px; font-weight: 700; }
.demo-header-actions .demo-language-chip svg { width: 12px; height: 12px; }
.demo-header-actions .demo-language-chip .demo-language-chevron { width: 9px; height: 9px; }
.demo-participants { display: flex !important; width: 54px !important; padding-left: 6px !important; align-items: center; justify-content: center; }
.demo-participants span { display: grid; width: 20px; height: 20px; margin-left: -6px; border: 2px solid #0c1117; border-radius: 7px; background: #202a39; color: #c8d0db; place-items: center; font-size: 6.5px; font-weight: 800; }
.demo-participants span:first-child { margin-left: 0; background: #6876f2; color: #fff; }
.demo-participants span:nth-child(2) { background: #183b35; color: #72d8b4; }
.demo-participants span:nth-child(3) { background: #342c49; color: #c3a6ff; }
.demo-connection i { width: 8px; height: 8px; border-radius: 50%; background: #5ad3a9; box-shadow: 0 0 0 4px rgba(90,211,169,.09); }
.demo-header-popovers { position: absolute; z-index: 40; top: 64px; right: 0; left: 0; pointer-events: none; }
.demo-header-popover { position: absolute; top: 8px; right: 12px; width: min(330px, calc(100% - 24px)); border: 1px solid #2c3541; border-radius: 13px; background: rgba(15,20,27,.98); color: #dfe4eb; box-shadow: 0 20px 60px rgba(0,0,0,.55); pointer-events: auto; overflow: hidden; backdrop-filter: blur(18px); }
.demo-header-popover[hidden] { display: none; }
.demo-search-popover { right: 150px; width: min(390px, calc(100% - 24px)); padding: 12px; }
.demo-search-popover > header { display: flex; margin-bottom: 10px; align-items: flex-start; justify-content: space-between; gap: 12px; }
.demo-search-popover header small, .demo-search-popover header b { display: block; }
.demo-search-popover header small { color: #6f7b8a; font-size: 7px; text-transform: uppercase; letter-spacing: .08em; }
.demo-search-popover header b { margin-top: 3px; font-size: 10px; }
.demo-search-popover kbd { padding: 3px 6px; border: 1px solid #2b3440; border-radius: 5px; background: #111720; color: #778291; font: 7px/1 system-ui; }
.demo-search-popover > label { display: grid; height: 38px; padding: 0 10px; border: 1px solid #394454; border-radius: 9px; background: #0b1016; grid-template-columns: 18px minmax(0,1fr); align-items: center; gap: 7px; }
.demo-search-popover > label svg { color: #728095; }
.demo-search-popover input { min-width: 0; border: 0; outline: 0; background: transparent; color: #edf1f6; font: 9px/1.3 system-ui; }
.demo-search-popover input::placeholder { color: #586475; }
.demo-search-results { display: grid; max-height: 272px; margin-top: 8px; overflow: auto; gap: 3px; }
.demo-search-results > button { display: grid; width: 100%; min-height: 45px; padding: 6px 8px; border: 0; border-radius: 9px; background: transparent; color: #dbe1e9; cursor: pointer; grid-template-columns: 29px minmax(0,1fr) auto; align-items: center; gap: 8px; text-align: left; }
.demo-search-results > button:hover, .demo-search-results > button:focus-visible { outline: none; background: #1a222d; }
.demo-search-results > button > i { display: grid; width: 29px; height: 29px; border-radius: 8px; background: #202940; color: #9aa7ff; place-items: center; font-size: 10px; font-style: normal; }
.demo-search-results b, .demo-search-results small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-search-results b { font-size: 9px; }
.demo-search-results small { margin-top: 3px; color: #6d7887; font-size: 7px; }
.demo-search-results em { color: #586474; font-size: 8px; font-style: normal; }
.demo-search-empty { margin: 14px 0 3px; color: #738091; font-size: 8px; text-align: center; }
.demo-language-popover { right: 84px; width: 180px; padding: 7px; }
.demo-language-popover > small { display: block; padding: 7px 8px 6px; color: #6f7a89; font-size: 7px; text-transform: uppercase; letter-spacing: .07em; }
.demo-language-popover > button { display: flex; width: 100%; min-height: 42px; padding: 6px 8px; border: 0; border-radius: 8px; background: transparent; color: #dce2e9; cursor: pointer; align-items: center; justify-content: space-between; text-align: left; }
.demo-language-popover > button:hover, .demo-language-popover > button[aria-current="true"] { background: #1a222d; }
.demo-language-popover b, .demo-language-popover small { display: block; }
.demo-language-popover b { font-size: 9px; }
.demo-language-popover small { margin-top: 2px; color: #687484; font-size: 7px; }
.demo-language-popover i { color: #7f8cff; font-size: 10px; font-style: normal; }
.demo-info-popover { padding: 12px; }
.demo-info-popover > header { display: flex; align-items: center; gap: 9px; }
.demo-info-logo { display: grid; width: 35px; height: 35px; border-radius: 10px; background: #0b1016; place-items: center; }
.demo-info-logo img { width: 29px; height: 29px; }
.demo-info-popover header b, .demo-info-popover header small { display: block; }
.demo-info-popover header b { font-size: 10px; }
.demo-info-popover header small { margin-top: 3px; color: #728092; font-size: 7.5px; }
.demo-info-popover dl { display: grid; margin: 12px 0 9px; border: 1px solid #27313d; border-radius: 10px; overflow: hidden; }
.demo-info-popover dl > div { display: grid; min-height: 37px; padding: 0 9px; border-bottom: 1px solid #27313d; grid-template-columns: 72px minmax(0,1fr); align-items: center; gap: 9px; }
.demo-info-popover dl > div:last-child { border-bottom: 0; }
.demo-info-popover dt { color: #697687; font-size: 7px; }
.demo-info-popover dd { margin: 0; overflow: hidden; color: #dce2ea; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.demo-info-popover > p { display: flex; margin: 0; padding: 9px; border-radius: 9px; background: rgba(78,204,160,.07); color: #8fa49f; font-size: 7.5px; line-height: 1.45; gap: 7px; }
.demo-info-popover > p i { width: 7px; height: 7px; flex: 0 0 7px; margin-top: 2px; border-radius: 50%; background: #58d4a8; }
.demo-call-overlay { position: absolute; z-index: 60; inset: 64px 0 0; display: grid; padding: 18px; background: rgba(5,8,12,.76); place-items: center; backdrop-filter: blur(15px); }
.demo-call-overlay[hidden] { display: none; }
.demo-call-card { position: relative; width: min(360px, 100%); padding: 28px 24px 22px; border: 1px solid #303a47; border-radius: 20px; background: radial-gradient(circle at 50% 0, rgba(105,119,255,.14), transparent 48%), #111720; color: #edf1f6; box-shadow: 0 26px 80px rgba(0,0,0,.58); text-align: center; }
.demo-call-close { position: absolute; top: 11px; right: 11px; display: grid; width: 29px; height: 29px; padding: 0; border: 0; border-radius: 8px; background: #1a222d; color: #7d8897; cursor: pointer; place-items: center; }
.demo-call-avatar { position: relative; width: 70px; height: 70px; margin: 0 auto 13px; border-radius: 21px; background: #0a0f15; box-shadow: 0 0 0 7px rgba(116,130,255,.08); }
.demo-call-avatar img { width: 100%; height: 100%; object-fit: contain; }
.demo-call-avatar i { position: absolute; right: -1px; bottom: -1px; width: 13px; height: 13px; border: 3px solid #111720; border-radius: 50%; background: #58d4a8; }
.demo-call-card > small { color: #788597; font-size: 7px; text-transform: uppercase; letter-spacing: .11em; }
.demo-call-card h3 { margin: 5px 0 3px; font-size: 22px; }
.demo-call-card > p { min-height: 18px; margin: 0; color: #9ba7b6; font-size: 9px; }
.demo-call-wave { display: flex; height: 39px; margin: 13px auto 6px; align-items: center; justify-content: center; gap: 4px; }
.demo-call-wave i { width: 3px; height: 9px; border-radius: 4px; background: #7482ff; animation: demo-call-wave 1.05s ease-in-out infinite; }
.demo-call-wave i:nth-child(2), .demo-call-wave i:nth-child(6) { height: 18px; animation-delay: -.7s; }
.demo-call-wave i:nth-child(3), .demo-call-wave i:nth-child(5) { height: 27px; animation-delay: -.45s; }
.demo-call-wave i:nth-child(4) { height: 35px; animation-delay: -.2s; }
.demo-call-card time { color: #758194; font: 8px/1.4 ui-monospace, monospace; }
.demo-call-actions { display: flex; margin-top: 20px; align-items: center; justify-content: center; gap: 10px; }
.demo-call-actions button { display: flex; min-width: 88px; height: 43px; padding: 0 13px; border: 1px solid #313b48; border-radius: 12px; background: #1a222d; color: #c9d0da; cursor: pointer; align-items: center; justify-content: center; gap: 7px; font-size: 8px; }
.demo-call-actions button[aria-pressed="true"] { background: #352733; color: #ffbec7; }
.demo-call-actions .is-end { border-color: #713847; background: #c64f62; color: white; }
@keyframes demo-call-wave { 0%,100% { transform: scaleY(.45); opacity: .55; } 50% { transform: scaleY(1); opacity: 1; } }
.demo-view-stack { position: relative; min-height: 0; flex: 1; overflow: hidden; }
.promanos-demo .scenario-panel { display: flex; width: 100%; height: 100%; min-height: 0; background: #0b0f14; flex-direction: column; }
.promanos-demo .scenario-panel[hidden] { display: none; }
.promanos-demo .scenario-thread { padding: 22px 26px 30px; gap: 12px; }
.promanos-demo .scenario-message { display: flex; align-items: flex-start; gap: 9px; }
.promanos-demo .scenario-message .scenario-avatar { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 8px; font-size: 8px; }
.promanos-demo .scenario-message.message-user { display: block; }
.promanos-demo .message-agent { background: #161c24; }
.promanos-demo .message-user { background: #e8ebf0; }
.promanos-demo .scenario-checklist { background: #10161d; }
.promanos-demo .scenario-result-card { border-color: #39445b; background: linear-gradient(135deg, #17202b, #111820); }


.promanos-demo .scenario-composer.demo-composer {
  display: grid;
  min-height: 58px;
  margin: 10px 14px 13px;
  padding: 6px;
  border: 1px solid #344052;
  border-radius: 15px;
  background: #111821;
  color: #8591a1;
  box-shadow: 0 14px 34px rgba(0,0,0,.2);
  grid-template-columns: 36px minmax(0, 1fr) 36px 36px;
  align-items: end;
  gap: 7px;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.promanos-demo .scenario-composer.demo-composer:hover { border-color: #414e62; background: #131b25; }
.promanos-demo .scenario-composer.demo-composer:focus-within { border-color: #7083ee; background: #131b25; box-shadow: 0 0 0 3px rgba(112,131,238,.1), 0 16px 38px rgba(0,0,0,.24); }
.demo-composer > button { display: grid; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 11px; background: transparent; color: #8995a5; cursor: pointer; place-items: center; transition: color 140ms ease, background 140ms ease, transform 140ms ease; }
.demo-composer > button:hover { background: #1c2633; color: #edf1f6; }
.demo-composer > button:active { transform: scale(.95); }
.demo-composer svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.demo-composer textarea { width: 100%; min-height: 36px; max-height: 82px; padding: 9px 3px 8px; overflow-y: auto; border: 0; outline: 0; resize: none; background: transparent; color: #e8edf4; font-family: inherit; font-size: 10px; line-height: 1.55; scrollbar-width: thin; scrollbar-color: #394556 transparent; }
.demo-composer textarea::placeholder { color: #647184; opacity: 1; }
.demo-composer .demo-send { border-radius: 11px; background: #1a2330; color: #596576; cursor: default; }
.demo-composer .demo-send.is-active { background: #7485f3; color: #fff; cursor: pointer; box-shadow: 0 6px 18px rgba(116,133,243,.25); }
.demo-composer .demo-send.is-active:hover { background: #8291f6; }
.demo-toast { position: absolute; z-index: 40; right: 16px; bottom: 15px; max-width: 270px; padding: 10px 13px; border: 1px solid #364252; border-radius: 10px; background: rgba(20, 27, 36, .96); color: #ccd3dc; box-shadow: 0 16px 40px rgba(0, 0, 0, .38); font-size: 9px; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity 180ms ease, transform 180ms ease; }
.demo-toast.is-visible { opacity: 1; transform: none; }

@media (max-width: 1120px) {
  .promanos-demo { height: 740px; }
  .demo-shell { grid-template-columns: 48px 250px minmax(0, 1fr); }
  .demo-rail { padding-inline: 4px; }
  .demo-rail button { width: 36px; height: 36px; }
  .demo-business-header { grid-template-columns: 32px minmax(0, 1fr) 28px; }
  .demo-business-header > img { width: 30px; height: 30px; }
  .demo-header-replay { display: none !important; }
  .demo-search-popover { right: 96px; }
}

@media (max-width: 820px) {
  .promanos-demo { height: 730px; border-radius: 18px; }
  .demo-shell { position: relative; display: block; }
  .demo-rail { display: none; }
  .promanos-demo .scenario-sidebar.demo-business-nav { position: absolute; z-index: 12; top: 0; bottom: 0; left: 0; width: min(290px, 88%); box-shadow: 22px 0 60px rgba(0, 0, 0, .46); transform: translateX(-103%); transition: transform 220ms ease; }
  .promanos-demo .scenario-sidebar.demo-business-nav.is-open { transform: none; }
  .promanos-demo .scenario-workspace.demo-main { height: 100%; }
  .demo-mobile-nav { display: grid; }
  .demo-conversation-header { padding-inline: 9px; gap: 7px; }
  .demo-header-leading { gap: 5px; }
  .demo-header-actions { gap: 2px; }
  .demo-participants { display: none !important; }
  .demo-search-popover { right: 8px; width: calc(100% - 16px); }
  .demo-language-popover, .demo-info-popover { right: 8px; }
  .demo-splash { padding: 0; }
  .demo-splash-photo { background-position: 68% center; opacity: .36; }
  .demo-splash-inner { width: calc(100% - 40px); place-items: center; }
  .demo-splash-panel { width: min(390px, 100%); margin-left: 0; gap: 26px; }
}

@media (max-width: 560px) {
  .promanos-demo { height: 710px; border-radius: 15px; }
  .demo-titlebar { height: 30px; }
  .demo-splash { inset-block-start: 30px; padding: 0; }
  .demo-shell { height: calc(100% - 30px); }
  .demo-splash-inner { width: calc(100% - 32px); }
  .demo-splash-panel { gap: 22px; }
  .demo-splash-brand > span,
  .demo-splash-brand img { width: 43px; height: 43px; }
  .demo-splash h3 { font-size: 30px; }
  .demo-splash-description { font-size: 10px; }
  .demo-conversation-header { min-height: 58px; padding-inline: 7px; }
  .demo-header-popovers { top: 58px; }
  .demo-header-avatar { width: 31px !important; height: 31px !important; }
  .demo-header-avatar img { width: 28px; height: 28px; }
  .demo-header-copy .demo-header-breadcrumb, .demo-header-copy > small:last-child { display: none; }
  .demo-header-actions .demo-language-chip, .demo-connection, .demo-header-actions > button[data-demo-info-toggle] { display: none; }
  .demo-header-leading > button, .demo-header-actions > button { width: 29px; height: 29px; }
  .demo-call-overlay { inset-block-start: 58px; padding: 10px; }
  .demo-call-card { padding-inline: 16px; }
  .promanos-demo .scenario-thread { padding: 16px 12px 22px; }
  .promanos-demo .scenario-result-card { grid-template-columns: 1fr; }
  .promanos-demo .scenario-result-card small { margin-top: 3px; grid-row: auto; grid-column: 1; max-width: none; text-align: left; }
  .promanos-demo .scenario-brief { padding: 15px; }
  .promanos-demo .scenario-composer.demo-composer { margin: 8px 8px 10px; grid-template-columns: 34px minmax(0, 1fr) 34px 34px; padding: 5px; gap: 4px; }
  .demo-composer > button { width: 34px; height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .demo-splash-check.is-checking > i,
  .demo-splash-photo,
  .demo-splash::after,
  .demo-splash-panel,
  .story-agent-list > button.is-created,
  .demo-call-wave i { animation: none; }
  .demo-splash,
  .demo-splash-track i,
  .demo-business-nav,
  .demo-toast { transition: none; }
}

/* Business app builder: a no-code product surface, not a developer API example. */
.app-builder-section {
  padding-top: clamp(52px, 5vw, 72px);
  background:
    radial-gradient(circle at 77% 46%, rgba(92, 106, 238, .09), transparent 31%),
    #080808;
}
.app-builder-section .developers-inner { grid-template-columns: minmax(0, .82fr) minmax(520px, 1.18fr); gap: clamp(70px, 8vw, 125px); }
.app-builder-section .developers-copy > p { max-width: 610px; }
.app-builder-tags span { color: #aaa; }

.app-builder-window {
  overflow: hidden;
  border: 1px solid #292d35;
  border-radius: 20px;
  background: #0e1116;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .34);
}
.app-builder-top {
  display: flex;
  min-height: 48px;
  padding: 0 16px;
  border-bottom: 1px solid #272b32;
  background: #15181d;
  align-items: center;
  gap: 7px;
}
.app-builder-top > span { width: 7px; height: 7px; border-radius: 50%; background: #444950; }
.app-builder-top small { margin-left: 10px; color: #9098a4; font-size: 10px; }
.app-builder-top b { min-height: 24px; margin-left: auto; padding: 0 9px; border: 1px solid #343a44; border-radius: 999px; color: #8892a0; display: inline-flex; align-items: center; font-size: 8px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.app-builder-steps { display: grid; min-height: 64px; padding: 10px 18px; border-bottom: 1px solid #272b32; background: #101318; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: 8px; }
.app-builder-steps > span { position: relative; display: flex; min-width: 0; color: #636c79; align-items: center; gap: 8px; }
.app-builder-steps > span:not(:last-child)::after { position: absolute; right: 7px; width: 28%; height: 1px; background: #2b3038; content: ""; }
.app-builder-steps i { display: grid; width: 23px; height: 23px; flex: 0 0 23px; border: 1px solid #343a44; border-radius: 50%; place-items: center; font-size: 8px; font-style: normal; }
.app-builder-steps b { overflow: hidden; font-size: 8px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.app-builder-steps .is-active { color: #cdd3ff; }
.app-builder-steps .is-active i { border-color: #6976f4; background: #6976f4; color: white; }
.app-builder-body { display: grid; padding: 18px; gap: 12px; }
.app-builder-prompt { padding: 16px; border: 1px solid #2b3038; border-radius: 13px; background: #15191f; }
.app-builder-prompt > span { color: #7b8491; font-size: 8px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.app-builder-prompt p { margin: 9px 0 13px; color: #d5dae2; font-size: 11px; line-height: 1.55; }
.app-builder-prompt button { display: inline-flex; min-height: 31px; padding: 0 11px; border: 1px solid #39425a; border-radius: 9px; background: #202942; color: #bdc6ff; align-items: center; gap: 7px; font-size: 8px; pointer-events: none; }
.app-builder-prompt button b { font-weight: 680; }
.app-builder-preview { display: grid; min-height: 225px; overflow: hidden; border: 1px solid #2b3038; border-radius: 13px; background: #0e1217; grid-template-columns: 142px minmax(0, 1fr); }
.app-builder-preview > aside { display: flex; padding: 15px 10px; border-right: 1px solid #282d35; background: #11151b; flex-direction: column; gap: 5px; }
.app-builder-preview > aside strong { margin: 0 7px 9px; color: #e2e6ec; font-size: 9px; line-height: 1.35; }
.app-builder-preview > aside span { min-height: 30px; padding: 0 8px; border-radius: 7px; color: #707a87; display: flex; align-items: center; font-size: 8px; }
.app-builder-preview > aside span.is-active { background: #20283a; color: #c8d0ff; }
.app-builder-preview > div { min-width: 0; padding: 15px; }
.app-builder-preview header { display: flex; padding-bottom: 11px; border-bottom: 1px solid #252b33; align-items: center; justify-content: space-between; gap: 10px; }
.app-builder-preview header span { color: #737d8a; font-size: 8px; }
.app-builder-preview header b { color: #e4e8ed; font-size: 11px; }
.app-builder-fields { display: grid; margin-top: 13px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.app-builder-fields label { display: grid; gap: 6px; }
.app-builder-fields label span { color: #747e8b; font-size: 7px; }
.app-builder-fields label i { display: block; height: 34px; border: 1px solid #29303a; border-radius: 7px; background: #12171d; }
.app-builder-rule { display: flex; min-height: 44px; margin-top: 13px; padding: 0 10px; border: 1px solid #333b4c; border-radius: 9px; background: #171e2a; color: #aeb8e8; align-items: center; gap: 9px; }
.app-builder-rule span { display: grid; width: 20px; height: 20px; flex: 0 0 20px; border-radius: 6px; background: #6875ef; color: white; place-items: center; font-size: 9px; }
.app-builder-rule b { font-size: 8px; font-weight: 620; line-height: 1.35; }
.app-builder-status { display: flex; min-height: 49px; padding: 0 17px; border-top: 1px solid #272b32; color: #8993a0; align-items: center; gap: 8px; font-size: 9px; }

@media (max-width: 1050px) {
  .app-builder-section .developers-inner { grid-template-columns: 1fr; gap: 42px; }
  .app-builder-section .developers-copy { max-width: 760px; }
  .app-builder-window { width: 100%; max-width: 820px; }
}

@media (max-width: 620px) {
  .app-builder-window { border-radius: 15px; }
  .app-builder-top { min-height: 44px; padding-inline: 12px; }
  .app-builder-steps { min-height: 57px; padding-inline: 12px; }
  .app-builder-steps > span:not(:last-child)::after { display: none; }
  .app-builder-steps b { font-size: 7px; white-space: normal; }
  .app-builder-body { padding: 10px; }
  .app-builder-prompt { padding: 13px; }
  .app-builder-preview { min-height: 275px; grid-template-columns: 1fr; }
  .app-builder-preview > aside { padding: 9px; border-right: 0; border-bottom: 1px solid #282d35; flex-direction: row; align-items: center; overflow-x: auto; }
  .app-builder-preview > aside strong { margin: 0 8px 0 0; min-width: 115px; }
  .app-builder-preview > aside span { min-width: max-content; }
  .app-builder-fields { grid-template-columns: 1fr; }
  .app-builder-fields label:nth-child(n+3) { display: none; }
  .app-builder-status { padding: 10px 13px; line-height: 1.4; }
}

.model-apps-copy-block { max-width: 620px; margin-top: 30px; padding: 3px 0 3px 17px; border-left: 2px solid #6d79ef; }
.model-apps-copy-block strong { display: block; color: #e9e9e9; font-size: 15px; font-weight: 650; }
.model-apps-copy-block p { margin: 8px 0 0; color: #959595; font-size: 13px; line-height: 1.6; }

.model-apps-console {
  overflow: hidden;
  border: 1px solid #292e37;
  border-radius: 20px;
  background: #0d1116;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .38);
}
.model-apps-top { display: flex; min-height: 47px; padding: 0 15px; border-bottom: 1px solid #272c34; background: #15191e; align-items: center; gap: 7px; }
.model-apps-top > span { width: 7px; height: 7px; border-radius: 50%; background: #454a51; }
.model-apps-top small { margin-left: 9px; color: #929ba7; font-size: 9px; }
.model-apps-top b { min-height: 23px; margin-left: auto; padding: 0 9px; border: 1px solid #343b46; border-radius: 999px; color: #8993a1; display: inline-flex; align-items: center; font-size: 8px; font-weight: 650; }

.model-orchestra { padding: 18px; }
.model-orchestra > header { display: grid; gap: 5px; }
.model-orchestra > header span, .ready-apps header span { color: #75808e; font-size: 8px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.model-orchestra > header h3, .ready-apps header h3 { margin: 0; color: #e5e9ef; font-size: 13px; font-weight: 640; letter-spacing: -.015em; }
.model-orchestra-grid { display: grid; margin-top: 14px; grid-template-columns: repeat(4, minmax(80px, 1fr)) minmax(220px, 1.65fr); gap: 7px; }
.model-orchestra-grid article { display: grid; min-width: 0; min-height: 78px; padding: 10px; border: 1px solid #2b313b; border-radius: 11px; background: #131820; grid-template-columns: 27px minmax(0, 1fr); align-items: center; gap: 8px; }
.model-orchestra-grid article > i { display: grid; width: 27px; height: 27px; border-radius: 8px; background: #20283a; color: #aeb8ff; place-items: center; font-size: 9px; font-style: normal; font-weight: 760; }
.model-orchestra-grid article:nth-child(2) > i { background: #202226; color: #e1e3e7; }
.model-orchestra-grid article:nth-child(3) > i { background: #2a2233; color: #d5b7ef; }
.model-orchestra-grid article:nth-child(4) > i { background: #1d2b29; color: #9dd9c9; }
.model-orchestra-grid article > span { min-width: 0; }
.model-orchestra-grid b, .model-orchestra-grid small { display: block; overflow: hidden; text-overflow: ellipsis; }
.model-orchestra-grid b { color: #d9dee6; font-size: 9px; font-weight: 680; white-space: nowrap; }
.model-orchestra-grid small { margin-top: 5px; color: #6f7987; font-size: 7px; line-height: 1.35; }
.pro1-model-layer { display: grid; margin-top: 9px; padding: 11px; border: 1px solid #3c4662; border-radius: 13px; background: radial-gradient(circle at 16% 0%, rgba(104, 116, 244, .16), transparent 46%), linear-gradient(135deg, #171d2a, #11161e); grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 9px; }
.pro1-model-copy { display: grid; min-width: 0; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 10px; }
.pro1-model-copy > i { display: grid; width: 44px; height: 44px; border: 1px solid rgba(151, 161, 255, .32); border-radius: 12px; background: linear-gradient(145deg, #7682ff, #5146c7); box-shadow: 0 8px 24px rgba(69, 61, 187, .24); color: #fff; place-items: center; font-size: 8px; font-style: normal; font-weight: 790; letter-spacing: -.02em; }
.pro1-model-copy > span { min-width: 0; }
.pro1-model-copy small, .pro1-model-copy b, .pro1-model-copy p { display: block; }
.pro1-model-copy small { color: #98a2ff; font-size: 7px; font-weight: 720; letter-spacing: .07em; text-transform: uppercase; }
.pro1-model-copy b { margin-top: 3px; color: #eef0f6; font-size: 9px; font-weight: 680; line-height: 1.3; }
.pro1-model-copy p { margin: 4px 0 0; color: #818b9b; font-size: 7px; line-height: 1.4; }
.specialized-models { display: flex; min-width: 0; min-height: 78px; padding: 9px 10px; border: 1px solid #2b3341; border-radius: 11px; background: rgba(10, 14, 20, .58); flex-direction: column; justify-content: center; }
.specialized-models header { display: grid; gap: 3px; }
.specialized-models header b { color: #dce1e9; font-size: 8px; font-weight: 680; }
.specialized-models header small { color: #778292; font-size: 7px; line-height: 1.35; }
.specialized-model-cloud { display: flex; margin-top: 8px; flex-wrap: wrap; gap: 4px; }
.specialized-model-cloud span { padding: 4px 6px; border: 1px solid #303847; border-radius: 999px; background: #171d26; color: #aeb7c5; font-size: 7px; font-weight: 630; line-height: 1; }
.specialized-model-cloud .is-more { border-color: rgba(124, 135, 250, .38); background: rgba(96, 107, 231, .13); color: #aeb6ff; }
.model-merge { display: grid; height: 28px; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.model-merge span { height: 1px; background: linear-gradient(90deg, transparent, #343c4c); }
.model-merge span:last-child { background: linear-gradient(90deg, #343c4c, transparent); }
.model-merge i { color: #6f7bf0; font-size: 12px; font-style: normal; }
.model-result { display: grid; min-height: 57px; padding: 10px 12px; border: 1px solid #3a445d; border-radius: 12px; background: linear-gradient(135deg, #1b2332, #141a22); grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.model-result img { width: 34px; height: 34px; border-radius: 9px; }
.model-result b, .model-result small { display: block; }
.model-result b { color: #e8ebf1; font-size: 10px; font-weight: 680; }
.model-result small { margin-top: 4px; color: #8993a2; font-size: 8px; }
.model-result em { display: grid; width: 24px; height: 24px; border-radius: 50%; background: #557a69; color: #d9ffed; place-items: center; font-size: 9px; font-style: normal; }

.ready-apps { padding: 17px 18px 18px; border-top: 1px solid #272c34; background: #0f1319; }
.ready-apps > header { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.ready-apps > header > div { display: grid; gap: 5px; }
.ready-apps > header > b { min-height: 23px; padding: 0 8px; border: 1px solid #303744; border-radius: 999px; color: #7d8795; display: inline-flex; align-items: center; font-size: 7px; font-weight: 650; }
.ready-apps-grid { display: grid; margin-top: 13px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.ready-apps-grid article { display: flex; min-width: 0; min-height: 46px; padding: 8px 9px; border: 1px solid #29303a; border-radius: 10px; background: #141920; color: #bac1cb; align-items: center; gap: 8px; }
.ready-apps-grid article i { display: grid; width: 24px; height: 24px; flex: 0 0 24px; border-radius: 7px; background: #202735; color: #9da8ef; place-items: center; font-size: 9px; font-style: normal; }
.ready-apps-grid article b { overflow: hidden; font-size: 8px; font-weight: 620; line-height: 1.3; text-overflow: ellipsis; }
.ready-apps-grid .ready-app-custom { border-style: dashed; border-color: #424b63; background: #171d29; color: #c8d0ff; grid-column: 1 / -1; }
.ready-apps-grid .ready-app-custom i { background: #6875ef; color: white; }
.model-apps-status { display: flex; min-height: 47px; padding: 0 16px; border-top: 1px solid #272c34; color: #87919f; align-items: center; gap: 8px; font-size: 8px; }

@media (max-width: 620px) {
  .model-apps-console { border-radius: 15px; }
  .model-apps-top { padding-inline: 11px; }
  .model-apps-top b { display: none; }
  .model-orchestra, .ready-apps { padding: 13px; }
  .model-orchestra-grid { grid-template-columns: 1fr 1fr; }
  .model-orchestra-grid article { min-height: 67px; }
  .model-orchestra-grid .specialized-models { grid-column: 1 / -1; }
  .pro1-model-layer { grid-template-columns: 1fr; }
  .pro1-model-copy > i { width: 40px; height: 40px; }
  .model-result { grid-template-columns: 31px minmax(0, 1fr); }
  .model-result img { width: 31px; height: 31px; }
  .model-result em { display: none; }
  .ready-apps-grid { grid-template-columns: 1fr 1fr; }
  .ready-apps-grid .ready-app-custom { grid-column: 1 / -1; }
  .model-apps-status { min-height: 54px; padding: 9px 12px; line-height: 1.4; }
}

/* Guided new-business story inside the PromanOS interface demo. */
.demo-rail-business { position: relative; }
.demo-rail-business > span { display: grid; width: 28px; height: 28px; border-radius: 9px; background: linear-gradient(145deg, #6d7bf6, #58c6b5); color: #071015; place-items: center; font-size: 8px; font-weight: 800; letter-spacing: -.03em; }
.demo-rail-business > i { position: absolute; right: 6px; bottom: 5px; width: 7px; height: 7px; border: 2px solid #0c1117; border-radius: 50%; background: #57d2a9; box-sizing: content-box; }
.demo-rail-business[hidden],
.story-business-menu[hidden],
.story-nav-section[hidden] { display: none !important; }
.demo-rail-business:not([hidden]) { animation: story-pop-in 420ms cubic-bezier(.2,.8,.25,1) both; }

.story-nav-home { display: grid; width: 100%; min-height: 58px; padding: 7px 8px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #8f99a7; cursor: pointer; grid-template-columns: 29px minmax(0, 1fr); align-items: center; gap: 9px; text-align: left; }
.story-nav-home:hover { background: #161d26; color: #d5dbe4; }
.story-nav-home.is-active { border-color: #35415a; background: #202940; color: #eef1f6; box-shadow: inset 2px 0 #7784ff; }
.story-nav-pro { display: grid; width: 29px; height: 29px; overflow: hidden; border-radius: 8px; background: #171e28; place-items: center; }
.story-nav-pro img { width: 29px; height: 29px; object-fit: contain; }
.story-nav-home > span:last-child { min-width: 0; }
.story-nav-home b,
.story-nav-home small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-nav-home b { font-size: 9px; font-weight: 680; }
.story-nav-home small { margin-top: 4px; color: #687382; font-size: 7px; }
.story-business-menu { margin-top: 12px; padding-top: 9px; border-top: 1px solid #202731; }
.story-menu-caption { margin: 0 8px 7px; color: #626d7d; font-size: 7px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.story-nav-section { animation: story-section-in 360ms cubic-bezier(.2,.75,.25,1) both; }
.story-nav-section.is-new .demo-group-toggle { background: rgba(107,123,243,.12); color: #bac4ff; box-shadow: inset 2px 0 #7784ff; }
.story-nav-section .demo-group-content > button.is-active { border-color: #33405a; background: #1b2435; color: #eef1f6; }
.story-sidebar-status { display: flex; min-height: 40px; padding: 0 13px; border-top: 1px solid #202731; background: #0d1218; color: #778291; align-items: center; gap: 8px; font-size: 8px; }
.story-sidebar-status i { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: #6b79ef; box-shadow: 0 0 0 4px rgba(107,121,239,.08); }
.story-business-created .story-sidebar-status i { background: #57cda6; box-shadow: 0 0 0 4px rgba(87,205,166,.08); }

/* PromanOS desktop navigation parity. */
.demo-shell { grid-template-columns: 52px 320px minmax(0, 1fr); }
.demo-rail { padding: 8px 6px; border-color: #272b32; background: #0b0e13; gap: 6px; }
.demo-rail button { width: 38px; height: 38px; border: 1px solid transparent; border-radius: 10px; color: #727c8a; }
.demo-rail button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.demo-rail button:hover { border-color: #2d3541; background: #151a21; color: #d8dde5; }
.demo-rail button.is-active { border-color: #343c48; background: #181e26; color: #f0f2f5; box-shadow: none; }
.demo-rail .demo-rail-add { border: 1px dashed #343b46; color: #687382; font-size: 14px; }
.demo-rail .demo-rail-divider { width: 22px; height: 1px; margin: 3px 0; background: #252b33; }
.demo-rail-business > span { width: 30px; height: 30px; border-radius: 9px; background: #f1f3f6; color: #12151a; font-size: 8px; }
.demo-rail-business > i { right: 4px; bottom: 3px; border-color: #0b0e13; }

.promanos-demo .scenario-sidebar.demo-business-nav { border-color: #292e36; background: #101319; }
.demo-business-header { min-height: 66px; padding: 10px 12px; border-bottom: 0; grid-template-columns: 40px minmax(0, 1fr) 36px; gap: 9px; }
.demo-business-header .demo-business-avatar { position: relative; display: grid; width: 40px; height: 40px; padding: 0; border: 1px solid #2b323c; border-radius: 12px; background: #0c1016; overflow: visible; place-items: center; }
.demo-business-avatar img { width: 36px; height: 36px; border-radius: 10px; object-fit: contain; }
.demo-business-avatar > span { display: none; color: #11151a; font-size: 9px; font-weight: 850; }
.demo-business-avatar > i { position: absolute; right: -2px; bottom: -2px; display: block; width: 9px; height: 9px; border: 2px solid #101319; border-radius: 50%; background: #55d0a7; }
.demo-business-avatar.is-business { border-color: #e9ebee; background: #f1f2f4; }
.demo-business-avatar.is-business img { display: none; }
.demo-business-avatar.is-business > span { display: block; }
.demo-business-header b { color: #f0f2f5; font-size: 12px; font-weight: 750; letter-spacing: -.015em; }
.demo-business-header small { margin-top: 3px; color: #737d8b; font-size: 7.5px; }
.demo-business-header > button:last-child { width: 36px; height: 36px; border-radius: 10px; background: #1a1f28; color: #8a94a2; }

.promanos-demo .scenario-search { min-height: 42px; margin: 2px 12px 9px; padding: 0 11px; border: 1px solid #303641; border-radius: 12px; background: #15191f; grid-template-columns: 17px minmax(0, 1fr) auto; gap: 8px; color: #778190; }
.promanos-demo .scenario-search svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.promanos-demo .scenario-search input { font-size: 9px; }
.promanos-demo .scenario-search kbd { border-color: #303640; background: #11151b; color: #687280; }
.demo-nav-scroll { padding: 0 8px 10px; scrollbar-color: #333942 transparent; }

.story-nav-home { min-height: 54px; padding: 6px 7px; border-color: #292f38; border-radius: 11px; background: #0e1217; grid-template-columns: 34px minmax(0,1fr) 14px; gap: 8px; }
.story-nav-home:hover { border-color: #353d48; background: #171c23; }
.story-nav-home.is-active { border-color: #343b47; background: #171c23; box-shadow: none; }
.story-nav-pro { position: relative; width: 34px; height: 34px; border-radius: 10px; background: #0b0f14; overflow: visible; }
.story-nav-pro img { width: 32px; height: 32px; border-radius: 9px; }
.story-nav-pro > i { position: absolute; right: -1px; bottom: -1px; width: 8px; height: 8px; border: 2px solid #171c23; border-radius: 50%; background: #55d0a7; }
.story-nav-home > span:nth-child(2) { min-width: 0; }
.story-nav-home b { color: #e8ebf0; font-size: 9px; }
.story-nav-home small { margin-top: 3px; color: #7c8694; font-size: 7px; }
.story-nav-home > em { color: #65707e; font-size: 14px; font-style: normal; }
.story-business-menu { margin-top: 8px; padding-top: 0; border-top: 0; }
.story-nav-section { margin-top: 2px; }
.demo-group-toggle { min-height: 48px; padding: 5px 8px; border-radius: 10px; grid-template-columns: 13px minmax(0,1fr) auto; gap: 7px; align-items: center; }
.demo-group-toggle:hover { background: #171c23; }
.demo-group-toggle > span { align-self: start; padding-top: 5px; color: #697483; font-size: 9px; }
.demo-group-toggle[aria-expanded="false"] > span { transform: rotate(-90deg); }
.demo-group-toggle b { display: block; min-width: 0; overflow: hidden; color: #949daa; font-size: 9px; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.demo-group-toggle b::after { content: var(--story-summary, ""); display: block; margin-top: 4px; overflow: hidden; color: #707987; font-size: 7px; font-weight: 450; text-overflow: ellipsis; white-space: nowrap; }
.demo-group-toggle i { display: flex; color: #687280; align-items: center; gap: 7px; font-size: 10px; }
.demo-group-toggle i::before { content: var(--story-count, ""); color: #7c8693; font-size: 7px; font-weight: 650; }
.demo-group-content { margin: 1px 0 4px; gap: 2px; }
.demo-group-content > button { min-height: 46px; padding: 5px 7px 5px 27px; border-radius: 10px; grid-template-columns: 30px minmax(0,1fr) auto; gap: 8px; }
.demo-group-content > button > span:first-child { width: 29px; height: 29px; border-radius: 9px; background: #1c222b; }
.demo-group-content > button > b { color: #c2c8d1; font-size: 8px; }
.story-nav-section.is-new .demo-group-toggle { background: #181e27; color: #cbd2dc; box-shadow: none; }
.story-nav-section .demo-group-content > button.is-active { border-color: #353d49; background: #1a2029; box-shadow: none; }
.story-agent-list { padding: 0 0 4px; }
.story-agent-list > button { min-height: 57px; padding: 5px 7px; grid-template-columns: 38px minmax(0,1fr) auto; gap: 9px; }
.story-agent-list > button > .story-agent-avatar { width: 36px; height: 36px; }
.story-agent-copy b { font-size: 8.5px; }
.story-agent-copy small { margin-top: 4px; color: #7a8492; font-size: 7px; }
.story-agent-list time { padding-top: 5px; color: #697381; font-size: 7px; }
.story-sidebar-status { min-height: 34px; padding: 0 12px; border-color: #292f37; background: #0e1217; color: #747e8c; font-size: 7px; }
.demo-inbox-footer { flex: 0 0 50px; padding: 6px 8px; border-top: 1px solid #292f37; background: #0e1217; }
.demo-inbox-footer > button { display: grid; width: 100%; height: 38px; padding: 0 7px; border: 0; border-radius: 9px; background: transparent; color: #c3cad3; cursor: pointer; grid-template-columns: 28px minmax(0,1fr) auto; align-items: center; gap: 8px; text-align: left; }
.demo-inbox-footer > button:hover { background: #181e26; }
.demo-inbox-footer > button > span:first-child { display: grid; width: 27px; height: 27px; border-radius: 8px; background: #1a2231; color: #8d9aff; place-items: center; }
.demo-inbox-footer b, .demo-inbox-footer small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-inbox-footer b { font-size: 8px; }
.demo-inbox-footer small { margin-top: 3px; color: #6f7987; font-size: 6.5px; }
.demo-inbox-footer em { color: #697380; font-size: 13px; font-style: normal; }

.business-story-thread { display: flex; height: 100%; padding: 26px clamp(18px, 5vw, 70px) 34px; overflow-y: auto; background: radial-gradient(circle at 80% 5%, rgba(105,119,237,.08), transparent 34%), #0b0f14; flex-direction: column; gap: 10px; scrollbar-width: thin; scrollbar-color: #303946 transparent; }
.story-message { max-width: min(600px, 82%); padding: 12px 14px; border: 1px solid #29323d; border-radius: 14px; color: #cdd4dd; animation: story-message-in 340ms cubic-bezier(.2,.75,.25,1) both; }
.story-message.message-agent { display: grid; align-self: flex-start; background: #151c24; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; }
.story-message.message-agent.continues-agent-group { margin-left: 38px; grid-template-columns: minmax(0, 1fr); gap: 0; }
.story-message.message-user { align-self: flex-end; border-color: #dfe3e9; background: #edf0f4; color: #151922; }
.story-message p { margin: 0; font-size: 10px; line-height: 1.55; }
.story-message.has-rich,
.story-message.has-progress,
.story-message.has-browser-widget { width: min(720px, 92%); max-width: 92%; }
.story-message.has-rich,
.story-message.has-progress { background: linear-gradient(145deg, #151c24, #121820); }
.story-message.has-browser-widget { padding: 8px; background: #11171e; }
.story-rich-message { min-width: 0; padding: 2px 2px 1px; }
.story-rich-kicker { display: block; margin-bottom: 5px; color: #8496f6; font-size: 7px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.story-rich-message h4 { margin: 0 0 7px; color: #f0f3f7; font-size: 15px; line-height: 1.2; letter-spacing: -.02em; }
.story-rich-message > p { color: #aeb7c4; }
.story-rich-message > strong { display: block; margin-top: 10px; padding: 8px 10px; border-left: 2px solid #7687f1; border-radius: 0 7px 7px 0; color: #dfe4ff; background: rgba(112, 130, 237, .08); font-size: 9px; line-height: 1.5; }
.story-rich-list { margin: 10px 0 0; padding-left: 17px; color: #cbd2dc; font-size: 9px; line-height: 1.55; }
.story-rich-list li { padding: 2px 0 2px 2px; }
.story-rich-list li::marker { color: #8496f6; }
.story-rich-checklist { display: grid; margin-top: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.story-rich-checklist > div { display: grid; min-width: 0; padding: 7px 8px; border: 1px solid #2d3743; border-radius: 8px; background: #111820; color: #c9d0da; grid-template-columns: 16px minmax(0, 1fr); align-items: start; gap: 6px; font-size: 8px; line-height: 1.4; }
.story-rich-checklist i { display: grid; width: 15px; height: 15px; border-radius: 50%; color: #071611; background: #59cfa8; place-items: center; font-size: 8px; font-style: normal; font-weight: 900; }

.story-agent-progress { min-width: 0; }
.story-agent-progress > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.story-agent-progress > header > span { display: flex; min-width: 0; color: #eef1f5; align-items: center; gap: 7px; font-size: 10px; }
.story-agent-progress > header > span > i { width: 9px; height: 9px; border: 2px solid #3a4554; border-top-color: #8394f2; border-radius: 50%; animation: story-progress-spin .8s linear infinite; }
.story-agent-progress > header em { color: #7e8998; font-size: 7px; font-style: normal; font-variant-numeric: tabular-nums; }
.story-agent-progress > p { margin-top: 6px; color: #8e99a8; }
.story-progress-stages { display: grid; margin-top: 9px; gap: 5px; }
.story-progress-stages > div { display: grid; min-height: 24px; padding: 4px 6px; border-radius: 7px; color: #717d8c; grid-template-columns: 15px minmax(0,1fr); align-items: center; gap: 6px; font-size: 8px; transition: color 180ms ease, background 180ms ease; }
.story-progress-stages > div > i { width: 7px; height: 7px; border: 1px solid #485260; border-radius: 50%; font-size: 7px; font-style: normal; }
.story-progress-stages > div.is-active { color: #dbe0e8; background: rgba(119, 137, 239, .09); }
.story-progress-stages > div.is-active > i { border: 2px solid #48536b; border-top-color: #8797f4; animation: story-progress-spin .7s linear infinite; }
.story-progress-stages > div.is-done { color: #aab4c1; }
.story-progress-stages > div.is-done > i { display: grid; width: 14px; height: 14px; border: 0; color: #071611; background: #57cda6; place-items: center; font-weight: 900; }
.story-agent-progress > small { display: none; color: #75d3b2; font-size: 8px; }
.story-agent-progress.is-complete > header > span > i { border: 0; background: #57cda6; animation: none; }
.story-agent-progress.is-complete > header > span > i::after { content: "✓"; display: grid; width: 100%; height: 100%; color: #071611; place-items: center; font-size: 7px; font-style: normal; font-weight: 900; }
.story-message.has-progress.is-collapsed .story-agent-progress > p,
.story-message.has-progress.is-collapsed .story-progress-stages { display: none; }
.story-message.has-progress.is-collapsed .story-agent-progress > small { display: block; margin-top: 5px; }
.story-message.has-progress.is-collapsed { width: min(440px, 88%); }

.story-rich-browser-widget { min-width: 0; overflow: hidden; border: 1px solid #343b46; border-radius: 11px; background: #101318; box-shadow: 0 12px 28px rgba(0,0,0,.2); }
.story-rich-browser-widget > header { display: flex; min-height: 34px; padding: 5px 8px 0 9px; border-bottom: 1px solid #282e37; background: #15191e; align-items: flex-end; justify-content: space-between; }
.story-rich-browser-widget > header > span:last-child { padding: 0 4px 9px; color: #737d8b; font-size: 8px; letter-spacing: 2px; }
.story-rich-browser-tab { display: flex; width: min(230px, 55%); min-width: 0; min-height: 29px; padding: 0 8px; border: 1px solid #2c323b; border-bottom-color: #101318; border-radius: 8px 8px 0 0; background: #101318; align-items: center; gap: 7px; }
.story-rich-browser-tab > i,
.story-rich-browser-status > i { width: 6px; height: 6px; border-radius: 50%; background: #55c99a; flex: 0 0 auto; }
.story-rich-browser-tab strong { min-width: 0; overflow: hidden; color: #cbd1da; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.story-rich-browser-tab > span { margin-left: auto; color: #6f7987; font-size: 10px; }
.story-rich-browser-toolbar { display: grid; padding: 7px 8px; border-bottom: 1px solid #282e37; background: #14181e; grid-template-columns: 27px 27px 27px minmax(0, 1fr) 28px; align-items: center; gap: 4px; }
.story-rich-browser-toolbar > span:not(.story-browser-profile) { display: grid; width: 27px; height: 27px; border-radius: 7px; color: #8b95a3; background: #1a1f26; place-items: center; font-size: 9px; }
.story-rich-browser-toolbar > label { display: flex; min-width: 0; height: 27px; padding: 0 8px; border: 1px solid #252b34; border-radius: 7px; background: #0d1116; align-items: center; gap: 6px; }
.story-rich-browser-toolbar label i { color: #63d0a9; font-size: 6px; font-style: normal; }
.story-rich-browser-toolbar label span { min-width: 0; overflow: hidden; color: #b4bdc8; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.story-browser-profile { display: grid; width: 28px; height: 27px; border: 1px solid #38425e; border-radius: 8px; color: #aebaff; background: #1d2438; place-items: center; font-size: 7px; font-weight: 800; }
.story-rich-browser-status { display: flex; min-height: 27px; padding: 0 10px; border-bottom: 1px solid #282e37; color: #7f8997; align-items: center; gap: 6px; font-size: 7px; }
.story-rich-browser-page { padding: 18px 20px 16px; background: radial-gradient(circle at 78% 12%, rgba(101,121,223,.14), transparent 38%), #0d1116; text-align: center; }
.story-rich-browser-page > span { color: #8294ff; font-size: 7px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.story-rich-browser-page h4 { margin: 6px 0; color: #eef1f5; font-size: 15px; }
.story-rich-browser-page > p { max-width: 470px; margin: 0 auto; color: #8e98a6; font-size: 8px; line-height: 1.5; }
.story-rich-browser-page section { display: grid; margin: 13px auto 0; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; }
.story-rich-browser-page article { display: grid; padding: 8px; border: 1px solid #2b323d; border-radius: 8px; background: #151a20; gap: 3px; }
.story-rich-browser-page article b { color: #dce2ff; font-size: 8px; }
.story-rich-browser-page article span { color: #7f8998; font-size: 7px; }
@keyframes story-progress-spin { to { transform: rotate(360deg); } }
.story-pro-avatar { display: grid; width: 28px; height: 28px; overflow: hidden; border-radius: 8px; background: #202837; place-items: center; }
.story-pro-avatar img { width: 28px; height: 28px; object-fit: contain; }

.story-screen { height: 100%; padding: 22px 24px 28px; overflow-y: auto; background: radial-gradient(circle at 82% 0%, rgba(102,116,236,.07), transparent 35%), #0b0f14; scrollbar-width: thin; scrollbar-color: #303946 transparent; }
.story-screen-header { display: flex; padding-bottom: 16px; border-bottom: 1px solid #252d37; align-items: flex-end; justify-content: space-between; gap: 18px; }
.story-screen-header > div { min-width: 0; }
.story-screen-header > div > span { color: #7986f4; font-size: 8px; font-weight: 720; letter-spacing: .09em; text-transform: uppercase; }
.story-screen-header h3 { margin: 6px 0 0; color: #edf1f6; font-size: clamp(19px, 2.4vw, 28px); font-weight: 620; letter-spacing: -.04em; }
.story-screen-header p { max-width: 590px; margin: 7px 0 0; color: #778392; font-size: 9px; line-height: 1.5; }
.story-screen-header > button { min-height: 31px; padding: 0 10px; border: 1px solid #303a48; border-radius: 9px; background: #111821; color: #9ba5b3; cursor: pointer; font-family: inherit; font-size: 8px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.story-screen-header > button:hover { border-color: #46546a; color: #e4e9f0; }

.story-mail-layout { display: grid; margin-top: 14px; overflow: hidden; border: 1px solid #26303a; border-radius: 13px; background: #0f151c; grid-template-columns: 145px minmax(0, 1fr); }
.story-mail-layout > aside { padding: 10px; border-right: 1px solid #26303a; background: #10161e; }
.story-mail-layout > aside button { display: grid; width: 100%; min-height: 34px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: #778291; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 6px; text-align: left; font: inherit; }
.story-mail-layout > aside button.is-active { background: #1c2638; color: #cbd3e0; }
.story-mail-layout > aside b { font-size: 8px; }
.story-mail-layout > aside em { color: #7f8bfb; font-size: 8px; font-style: normal; }
.story-mail-layout > section { min-width: 0; padding: 8px; }
.story-mail-layout > section > article { display: grid; min-height: 48px; padding: 8px; border-bottom: 1px solid #222a34; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 9px; }
.story-mail-layout article > i,
.story-channel-thread header > i { display: grid; width: 28px; height: 28px; border-radius: 8px; background: #233048; color: #aebcff; place-items: center; font-size: 7px; font-style: normal; font-weight: 760; }
.story-mail-layout article b,
.story-mail-layout article span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-mail-layout article b { color: #cfd5de; font-size: 8px; }
.story-mail-layout article span { margin-top: 3px; color: #717c8c; font-size: 7px; }
.story-mail-layout article time { color: #667180; font-size: 7px; }
.story-draft { margin-top: 8px; padding: 11px; border: 1px solid #38445c; border-radius: 10px; background: #17202b; }
.story-draft > span { color: #9ba8ff; font-size: 7px; font-weight: 720; text-transform: uppercase; }
.story-draft p { margin: 7px 0 0; color: #b5bec9; font-size: 8px; line-height: 1.45; }
.story-draft button { min-height: 27px; margin-top: 9px; padding: 0 9px; border: 0; border-radius: 7px; background: #7180ed; color: white; font-size: 7px; font-weight: 680; }

.story-channel-grid { display: grid; margin-top: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.story-channel-grid article { display: grid; min-height: 72px; padding: 11px; border: 1px solid #29323d; border-radius: 11px; background: #111820; grid-template-columns: 31px minmax(0, 1fr) auto; align-items: center; gap: 9px; }
.story-channel-grid article > i { display: grid; width: 31px; height: 31px; border-radius: 9px; background: #202a3b; color: #9cacf0; place-items: center; font-size: 10px; font-style: normal; font-weight: 750; }
.story-channel-grid b,
.story-channel-grid span { display: block; }
.story-channel-grid b { color: #d3d9e2; font-size: 9px; }
.story-channel-grid span { margin-top: 4px; color: #73bba1; font-size: 7px; }
.story-channel-grid em { display: grid; min-width: 21px; height: 21px; border-radius: 999px; background: #24304a; color: #aeb9ff; place-items: center; font-size: 7px; font-style: normal; }
.story-channel-grid button { width: 25px; height: 25px; border: 1px solid #354052; border-radius: 7px; background: #171f2a; color: #aab4c1; }
.story-channel-thread { margin-top: 10px; padding: 13px; border: 1px solid #28323e; border-radius: 12px; background: #101720; }
.story-channel-thread header { display: flex; align-items: center; gap: 9px; }
.story-channel-thread header b,
.story-channel-thread header span { display: block; }
.story-channel-thread header b { color: #d5dbe4; font-size: 9px; }
.story-channel-thread header span { margin-top: 3px; color: #697585; font-size: 7px; }
.story-channel-thread > p { max-width: 430px; margin: 12px 0 0 38px; padding: 9px 11px; border-radius: 10px; background: #1a2330; color: #c4ccd7; font-size: 8px; }
.story-channel-thread > div { display: flex; margin: 9px 0 0 38px; color: #8490a0; align-items: center; gap: 9px; font-size: 7px; }
.story-channel-thread > div button { min-height: 25px; padding: 0 8px; border: 0; border-radius: 7px; background: #6e7cee; color: white; font-size: 7px; }
.story-messenger-screen { height: 100%; }
.story-messenger-workspace { display: grid; min-height: 0; margin-top: 12px; border: 1px solid #29313b; border-radius: 13px; background: #0d1218; overflow: hidden; grid-template-columns: 230px minmax(0,1fr); flex: 1; }
.story-messenger-inbox { display: flex; min-width: 0; min-height: 0; border-right: 1px solid #29313b; background: #10151b; flex-direction: column; }
.story-messenger-inbox > header { display: flex; min-height: 52px; padding: 9px 10px; align-items: center; justify-content: space-between; gap: 8px; }
.story-messenger-inbox header b, .story-messenger-inbox header small { display: block; }
.story-messenger-inbox header b { color: #e5e9ef; font-size: 10px; }
.story-messenger-inbox header small { margin-top: 3px; color: #6d7886; font-size: 6.5px; }
.story-messenger-inbox header button { width: 29px; height: 29px; padding: 0; border: 1px solid #303946; border-radius: 8px; background: #171d25; color: #8f99a6; }
.story-messenger-inbox > label { display: grid; height: 34px; margin: 0 9px 7px; padding: 0 9px; border: 1px solid #2c3540; border-radius: 9px; background: #0c1117; color: #6e7988; grid-template-columns: 15px minmax(0,1fr); align-items: center; gap: 6px; }
.story-messenger-inbox label svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.story-messenger-inbox label input { min-width: 0; border: 0; outline: 0; background: transparent; color: #dce1e8; font-size: 7.5px; }
.story-messenger-inbox label input::placeholder { color: #5f6a78; }
.story-messenger-inbox nav { min-height: 0; padding: 0 6px 8px; overflow: auto; }
.story-messenger-inbox nav > button { display: grid; width: 100%; min-height: 57px; padding: 6px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #c9d0d9; cursor: pointer; grid-template-columns: 36px minmax(0,1fr) auto; grid-template-rows: 1fr 1fr; align-items: center; gap: 0 8px; text-align: left; }
.story-messenger-inbox nav > button:hover, .story-messenger-inbox nav > button.is-active { border-color: #343d49; background: #1a2028; }
.story-messenger-inbox nav > button > .messenger-contact-avatar { grid-row: 1 / 3; }
.story-messenger-inbox nav > button > span:nth-child(2) { min-width: 0; grid-row: 1 / 3; }
.story-messenger-inbox nav b, .story-messenger-inbox nav small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-messenger-inbox nav b { font-size: 8px; }
.story-messenger-inbox nav small { margin-top: 4px; color: #737e8d; font-size: 6.5px; }
.story-messenger-inbox nav time { align-self: end; color: #697482; font-size: 6px; }
.story-messenger-inbox nav em { display: grid; align-self: start; width: 15px; height: 15px; border-radius: 50%; background: #6f7df1; color: #fff; place-items: center; font-size: 6px; font-style: normal; }
.messenger-contact-avatar { position: relative; display: grid; width: 35px; height: 35px; border-radius: 11px; background: #263142; color: #dbe2eb; place-items: center; font-size: 7px; font-weight: 800; }
.messenger-contact-avatar > i { position: absolute; right: -2px; bottom: -2px; display: grid; width: 14px; height: 14px; border: 2px solid #10151b; border-radius: 50%; background: #2a86d8; color: #fff; place-items: center; font-size: 6px; font-style: normal; }
.messenger-contact-avatar.is-whatsapp { background: #1f5949; color: #b7f2de; }
.messenger-contact-avatar.is-whatsapp > i { background: #2cb67d; }
.story-messenger-chat { display: flex; min-width: 0; min-height: 0; background: #0b1016; flex-direction: column; }
.story-messenger-chat > header { display: grid; min-height: 52px; padding: 7px 10px; border-bottom: 1px solid #28313b; grid-template-columns: 36px minmax(0,1fr) 1fr 30px 30px; align-items: center; gap: 8px; }
.story-messenger-chat header b, .story-messenger-chat header small { display: block; }
.story-messenger-chat header b { color: #e5e9ee; font-size: 9px; }
.story-messenger-chat header small { margin-top: 3px; color: #6c7786; font-size: 6.5px; }
.story-messenger-chat header small i { display: inline-grid; width: 13px; height: 13px; border-radius: 50%; background: #2784d6; color: white; place-items: center; font-size: 5px; font-style: normal; }
.story-messenger-chat header button { display: grid; width: 29px; height: 29px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #798493; place-items: center; font-size: 10px; }
.story-messenger-chat header button:hover { background: #171e27; color: #d7dde5; }
.story-messenger-chat header svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.story-messenger-thread { min-height: 0; padding: 10px 14px 14px; overflow: auto; flex: 1; background: radial-gradient(circle at 70% 0, rgba(96,113,235,.06), transparent 35%); }
.story-messenger-day { width: max-content; margin: 0 auto 10px; padding: 3px 7px; border-radius: 8px; background: #181e26; color: #6e7988; font-size: 6px; }
.story-messenger-thread-body[hidden], .story-messenger-thread-body [hidden] { display: none !important; }
.story-messenger-thread-body { display: flex; flex-direction: column; }
.story-messenger-thread-body > article { position: relative; max-width: min(360px,82%); margin-bottom: 8px; padding: 8px 10px 16px; border-radius: 12px; animation: story-message-in 300ms ease both; }
.story-messenger-thread-body > article p { margin: 0; font-size: 7.5px; line-height: 1.48; }
.story-messenger-thread-body > article time { position: absolute; right: 8px; bottom: 4px; color: #737e8d; font-size: 5.5px; }
.story-messenger-thread-body > article.is-client { align-self: flex-start; border: 1px solid #29333f; background: #171e27; color: #cbd2dc; }
.story-messenger-thread-body > article.is-agent { align-self: flex-end; border: 1px solid #5260bd; background: #26315b; color: #edf0ff; }
.story-messenger-thread-body > article.is-agent > span { position: absolute; top: -7px; left: 9px; padding: 2px 5px; border-radius: 5px; background: #7583f3; color: #fff; font-size: 5px; font-weight: 800; }
.story-messenger-thread-body > article.is-sent::after { content: "✓✓"; position: absolute; right: 7px; bottom: 3px; color: #72dab6; font-size: 5px; }
.story-agent-activity { display: grid; min-height: 41px; margin: 2px 0 9px; padding: 5px 8px; border: 1px solid #29333e; border-radius: 10px; background: #11171f; grid-template-columns: 29px minmax(0,1fr) 13px; align-items: center; gap: 7px; }
.story-agent-activity > .story-agent-avatar { width: 28px; height: 28px; transform: scale(.9); }
.story-agent-activity p { margin: 0; }
.story-agent-activity b, .story-agent-activity small { display: block; }
.story-agent-activity b { color: #cfd5de; font-size: 7px; }
.story-agent-activity small { margin-top: 3px; color: #778393; font-size: 6.25px; }
.story-agent-activity > i { width: 11px; height: 11px; border: 1px solid #6e7def; border-top-color: transparent; border-radius: 50%; animation: demo-splash-spin 700ms linear infinite; }
.story-agent-activity.is-done > i { border: 0; color: #5cd1a9; }
.story-agent-activity.is-done > i::before { content: "✓"; }
.story-messenger-approval { display: grid; align-self: flex-end; width: min(390px,90%); min-height: 48px; margin: 0 0 9px; padding: 7px 8px; border: 1px solid #3b4553; border-radius: 11px; background: #151c25; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 6px; animation: story-message-in 300ms ease both; }
.story-messenger-approval p { margin: 0; }
.story-messenger-approval b, .story-messenger-approval small { display: block; }
.story-messenger-approval b { color: #d7dde5; font-size: 7px; }
.story-messenger-approval small { margin-top: 3px; color: #737f8e; font-size: 5.8px; }
.story-messenger-approval button { min-height: 27px; padding: 0 8px; border: 1px solid #35404e; border-radius: 8px; background: #1b222c; color: #aeb7c4; font-size: 6px; }
.story-messenger-approval button:last-child { border-color: #7180ef; background: #7180ef; color: #fff; }
.story-messenger-composer { display: grid; min-height: 52px; margin: 7px 10px 9px; padding: 5px; border: 1px solid #303946; border-radius: 13px; background: #11171f; grid-template-columns: 34px minmax(0,1fr) auto 34px; align-items: end; gap: 5px; }
.story-messenger-composer > button { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 9px; background: #1a222d; color: #7e8997; }
.story-messenger-composer .is-send { background: #7280f0; color: #fff; }
.story-messenger-composer textarea { width: 100%; min-height: 34px; max-height: 64px; padding: 9px 4px; border: 0; outline: 0; resize: none; background: transparent; color: #e0e4ea; font-size: 7px; }
.story-messenger-composer textarea::placeholder { color: #606c7a; }
.story-messenger-composer > span { display: flex; height: 27px; padding: 0 7px; border: 1px solid #313b48; border-radius: 8px; color: #8e99a8; align-items: center; gap: 5px; font-size: 5.8px; white-space: nowrap; }
.story-messenger-composer > span i { width: 6px; height: 6px; border-radius: 50%; background: #58d0a8; }

.story-social-screen { height: 100%; }
.story-social-layout { display: grid; min-height: 360px; margin-top: 12px; overflow: hidden; border: 1px solid #29323d; border-radius: 13px; background: #0d1218; grid-template-columns: 205px minmax(0, 1fr); }
.story-social-layout > aside { padding: 10px; border-right: 1px solid #29323d; background: #10151b; }
.story-social-layout > aside > header { display: flex; min-height: 30px; padding: 0 5px 7px; color: #778392; align-items: center; justify-content: space-between; }
.story-social-layout > aside > header b { color: #aab3c0; font-size: 8px; }
.story-social-layout > aside > header span { display: grid; width: 20px; height: 20px; border-radius: 7px; background: #1b222c; place-items: center; font-size: 7px; }
.story-social-layout > aside > button { display: grid; width: 100%; min-height: 52px; padding: 6px 7px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #8a95a4; cursor: pointer; grid-template-columns: 32px minmax(0,1fr) auto; align-items: center; gap: 8px; text-align: left; }
.story-social-layout > aside > button:hover,
.story-social-layout > aside > button.is-active { border-color: #343d49; background: #1a2029; color: #e5e9ef; }
.story-social-layout > aside > button > i,
.story-social-layout > section > header i { display: grid; width: 31px; height: 31px; border-radius: 9px; background: #25334c; color: #b9c8ff; place-items: center; font-size: 8px; font-style: normal; font-weight: 780; }
.story-social-layout > aside > button > i.is-instagram { background: #35263b; color: #edb6df; }
.story-social-layout > aside > button > i.is-vk { background: #21354b; color: #a8d4ff; }
.story-social-layout > aside button b,
.story-social-layout > aside button small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-social-layout > aside button b { color: #d5dae2; font-size: 8px; }
.story-social-layout > aside button small { margin-top: 4px; color: #707b89; font-size: 6.5px; }
.story-social-layout > aside button em { display: grid; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #7180ed; color: white; place-items: center; font-size: 6px; font-style: normal; }
.story-social-layout > section { min-width: 0; padding: 12px; }
.story-social-layout > section > header { display: flex; min-height: 42px; padding-bottom: 10px; border-bottom: 1px solid #252e39; align-items: center; justify-content: space-between; gap: 10px; }
.story-social-layout > section > header > div { display: flex; min-width: 0; align-items: center; gap: 9px; }
.story-social-layout > section > header b,
.story-social-layout > section > header small { display: block; }
.story-social-layout > section > header b { color: #e1e6ed; font-size: 9px; }
.story-social-layout > section > header small { margin-top: 3px; color: #727d8b; font-size: 6.5px; }
.story-social-layout > section > header button { min-height: 29px; padding: 0 9px; border: 1px solid #394657; border-radius: 8px; background: #192230; color: #b7c1cf; font: inherit; font-size: 7px; }
.story-social-metrics { display: grid; margin-top: 10px; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; }
.story-social-metrics article { padding: 9px; border: 1px solid #28323e; border-radius: 10px; background: #111820; }
.story-social-metrics span,
.story-social-metrics small { display: block; color: #737e8d; font-size: 6.5px; }
.story-social-metrics b { display: block; margin-top: 6px; color: #edf1f6; font-size: 15px; }
.story-social-metrics small { margin-top: 3px; color: #5bcaa7; }
.story-social-work { display: grid; margin-top: 9px; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 8px; }
.story-social-work > article { min-width: 0; padding: 11px; border: 1px solid #29333f; border-radius: 11px; background: #111820; }
.story-social-work article > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.story-social-work article > header b,
.story-social-work article > header span { color: #98a4b3; font-size: 7px; font-weight: 700; }
.story-social-work article > header time { color: #677281; font-size: 6px; }
.story-social-inbox > p,
.story-social-draft > p { margin: 10px 0 0; color: #c0c8d3; font-size: 8px; line-height: 1.5; }
.story-social-inbox > div { display: flex; margin-top: 12px; padding-top: 9px; border-top: 1px solid #26303a; align-items: center; gap: 8px; }
.story-social-inbox > div > span { width: 28px; height: 28px; flex: 0 0 28px; }
.story-social-inbox > div p { margin: 0; }
.story-social-inbox > div b,
.story-social-inbox > div small { display: block; }
.story-social-inbox > div b { color: #cfd5de; font-size: 7px; }
.story-social-inbox > div small { margin-top: 3px; color: #737f8e; font-size: 6px; }
.story-social-draft { border-color: #39445b !important; background: #17202b !important; }
.story-social-draft header em { color: #5bd0a7; font-size: 6px; font-style: normal; }
.story-social-draft footer { display: flex; margin-top: 13px; justify-content: flex-end; gap: 6px; }
.story-social-draft footer button { min-height: 27px; padding: 0 9px; border: 1px solid #344050; border-radius: 7px; background: #111820; color: #9ca7b5; font: inherit; font-size: 6.5px; }
.story-social-draft footer button:last-child { border-color: #7180ed; background: #7180ed; color: white; }
.story-social-draft footer button.is-approved { border-color: #3d8c74; background: #1b473b; color: #baf3df; }

.story-browser { margin-top: 14px; overflow: hidden; border: 1px solid #2a333e; border-radius: 13px; background: #0e141b; }
.story-browser-tabs { display: flex; min-height: 33px; padding: 0 11px; border-bottom: 1px solid #28313c; background: #141a22; align-items: center; gap: 6px; }
.story-browser-tabs > span { width: 6px; height: 6px; border-radius: 50%; background: #4a505a; }
.story-browser-tabs b { margin-left: 7px; color: #8994a3; font-size: 8px; }
.story-address { display: grid; min-height: 38px; padding: 0 12px; border-bottom: 1px solid #252e38; background: #10161e; color: #768190; grid-template-columns: 17px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 8px; }
.story-address b { min-height: 13px; color: #aab4c2; font-weight: 550; }
.story-browser-page { display: grid; min-height: 185px; padding: 24px; background: radial-gradient(circle at 78% 30%, rgba(93,111,217,.16), transparent 33%), linear-gradient(145deg, #121924, #0d1218); grid-template-columns: minmax(0, 1fr) 125px; align-items: center; gap: 22px; }
.story-browser-page > div > span { color: #66c4a4; font-size: 7px; font-weight: 720; letter-spacing: .08em; text-transform: uppercase; }
.story-browser-page h4 { margin: 8px 0 0; color: #eef2f7; font-size: 24px; letter-spacing: -.04em; }
.story-browser-page p { max-width: 390px; margin: 8px 0 0; color: #84909f; font-size: 9px; line-height: 1.5; }
.story-browser-page button { min-height: 29px; margin-top: 12px; padding: 0 10px; border: 0; border-radius: 8px; background: #7483f0; color: white; font-size: 7px; font-weight: 680; }
.story-browser-page aside { display: grid; padding: 14px; border: 1px solid #303b4a; border-radius: 11px; background: rgba(17,24,33,.82); gap: 3px; }
.story-browser-page aside b { color: #e6ebf2; font-size: 15px; }
.story-browser-page aside span { color: #718091; font-size: 7px; }
.story-browser-page aside hr { width: 100%; margin: 9px 0; border: 0; border-top: 1px solid #2c3541; }

.story-site-builder { display: grid; min-height: 280px; margin-top: 14px; overflow: hidden; border: 1px solid #28323d; border-radius: 13px; background: #0f151c; grid-template-columns: 140px minmax(0, 1fr); }
.story-site-builder > aside { display: flex; padding: 13px 10px; border-right: 1px solid #28323d; background: #10161e; flex-direction: column; gap: 5px; }
.story-site-builder > aside > b { margin: 0 7px 5px; color: #778291; font-size: 8px; }
.story-site-builder > aside button { min-height: 30px; padding: 0 8px; border: 0; border-radius: 7px; background: transparent; color: #788493; text-align: left; font-family: inherit; font-size: 7px; font-weight: 600; line-height: 1.2; }
.story-site-builder > aside button.is-active { background: #1d2636; color: #cdd5e1; }
.story-site-builder > section { padding: 16px 18px; background: linear-gradient(145deg, #f4f3ee, #e8e7e1); color: #141414; }
.story-site-builder nav { display: flex; align-items: center; gap: 13px; color: #4e4e4b; font-size: 7px; }
.story-site-builder nav b { margin-right: auto; color: #111; font-size: 8px; }
.story-site-builder section > div { display: grid; height: calc(100% - 18px); align-content: center; }
.story-site-builder small { color: #66735d; font-size: 7px; font-weight: 700; text-transform: uppercase; }
.story-site-builder h4 { max-width: 380px; margin: 8px 0 0; font-size: clamp(20px, 3vw, 33px); line-height: 1; letter-spacing: -.045em; }
.story-site-builder p { max-width: 360px; margin: 10px 0 0; color: #686864; font-size: 8px; line-height: 1.5; }
.story-site-builder section button { width: max-content; min-height: 29px; margin-top: 13px; padding: 0 10px; border: 0; border-radius: 7px; background: #111; color: white; font-size: 7px; }

.story-metrics { display: grid; margin-top: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.story-metrics article { display: grid; min-height: 82px; padding: 12px; border: 1px solid #29333e; border-radius: 11px; background: #111820; align-content: space-between; }
.story-metrics span { color: #748090; font-size: 7px; }
.story-metrics b { color: #edf1f6; font-size: 20px; }
.story-metrics small { color: #69ba9e; font-size: 7px; }
.story-table { margin-top: 9px; overflow: hidden; border: 1px solid #29333e; border-radius: 11px; background: #101720; }
.story-table > header,
.story-table > div { display: grid; min-height: 43px; padding: 0 12px; border-bottom: 1px solid #252e38; grid-template-columns: 90px minmax(0, 1fr) 55px 70px; align-items: center; gap: 8px; font-size: 8px; }
.story-table > header { grid-template-columns: 1fr auto; color: #d1d7df; }
.story-table > header span { color: #6f7b8a; font-size: 7px; }
.story-table > div:last-child { border-bottom: 0; }
.story-table > div b { color: #aab5c4; }
.story-table > div span { color: #778393; }
.story-table > div em { color: #d9dee5; font-style: normal; }
.story-table > div i { color: #69b99d; font-style: normal; }
.story-table > div i.is-warning { color: #d3ad6c; }

.story-client-layout { display: grid; min-height: 290px; margin-top: 14px; overflow: hidden; border: 1px solid #29333e; border-radius: 13px; background: #0f151c; grid-template-columns: 180px minmax(0, 1fr); }
.story-client-layout > aside { padding: 13px 9px; border-right: 1px solid #29333e; background: #10161e; }
.story-client-layout > aside > b { display: block; margin: 0 7px 8px; color: #788493; font-size: 8px; }
.story-client-layout > aside button { display: grid; width: 100%; min-height: 48px; padding: 7px; border: 0; border-radius: 9px; background: transparent; color: #8793a2; grid-template-columns: 29px minmax(0,1fr); align-items: center; gap: 8px; text-align: left; }
.story-client-layout > aside button.is-active { background: #1c2534; color: #d4dae3; }
.story-client-layout > aside i { display: grid; width: 29px; height: 29px; border-radius: 8px; background: #253149; color: #aebcff; place-items: center; font-size: 7px; font-style: normal; }
.story-client-layout > aside button b,
.story-client-layout > aside button small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-client-layout > aside button b { font-size: 8px; }
.story-client-layout > aside button small { margin-top: 3px; color: #687585; font-size: 7px; }
.story-client-layout > section { padding: 17px; }
.story-client-layout > section > header { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 10px; }
.story-client-layout > section > header > i { display: grid; width: 38px; height: 38px; border-radius: 11px; background: #253149; color: #aebcff; place-items: center; font-size: 8px; font-style: normal; }
.story-client-layout h4 { margin: 0; color: #e4e8ee; font-size: 13px; }
.story-client-layout header span { display: block; margin-top: 4px; color: #6f7c8b; font-size: 7px; }
.story-client-layout header button { min-height: 28px; padding: 0 9px; border: 1px solid #364253; border-radius: 8px; background: #17202a; color: #aeb8c5; font-size: 7px; }
.story-client-facts { display: grid; margin-top: 16px; grid-template-columns: 1fr 1fr; gap: 8px; }
.story-client-facts article { padding: 11px; border: 1px solid #29333e; border-radius: 10px; background: #111820; }
.story-client-facts span,
.story-client-facts b { display: block; }
.story-client-facts span { color: #707d8c; font-size: 7px; }
.story-client-facts b { margin-top: 6px; color: #d1d8e1; font-size: 9px; }
.story-client-note { display: grid; margin-top: 9px; padding: 11px; border: 1px solid #39445b; border-radius: 10px; background: #17202b; grid-template-columns: 28px minmax(0,1fr); align-items: start; gap: 9px; }
.story-client-note span { display: grid; width: 28px; height: 28px; border-radius: 8px; background: #6d7bef; color: white; place-items: center; font-size: 7px; font-weight: 750; }
.story-client-note p { margin: 0; color: #aeb8c5; font-size: 8px; line-height: 1.5; }

.story-agent-summary { display: flex; min-height: 68px; margin-top: 14px; padding: 11px 13px; border: 1px solid #354158; border-radius: 12px; background: linear-gradient(135deg, #172131, #111820); align-items: center; gap: 12px; }
.story-agent-stack { display: flex; align-items: center; }
.story-agent-stack i { display: grid; width: 27px; height: 27px; margin-left: -6px; border: 2px solid #111820; border-radius: 9px; background: #263452; color: #b8c5ff; place-items: center; font-size: 7px; font-style: normal; font-weight: 760; }
.story-agent-stack i:first-child { margin-left: 0; }
.story-agent-summary > div:nth-child(2) { min-width: 0; flex: 1; }
.story-agent-summary b, .story-agent-summary span { display: block; }
.story-agent-summary b { color: #e5e9f0; font-size: 10px; }
.story-agent-summary span { margin-top: 4px; color: #7c8898; font-size: 7px; }
.story-agent-summary > em { padding: 6px 8px; border: 1px solid #3e4a5d; border-radius: 999px; color: #94a0b0; font-size: 7px; font-style: normal; white-space: nowrap; }
.story-agent-grid { display: grid; margin-top: 9px; grid-template-columns: 1fr 1fr; gap: 8px; }
.story-agent-grid article { display: grid; min-height: 94px; padding: 11px; border: 1px solid #29333e; border-radius: 11px; background: #111820; grid-template-columns: 34px minmax(0,1fr) auto; align-items: start; gap: 9px; }
.story-agent-grid article > i { display: grid; width: 34px; height: 34px; border-radius: 10px; background: #203248; color: #8fe0c4; place-items: center; font-size: 8px; font-style: normal; font-weight: 780; }
.story-agent-grid article:nth-child(2) > i { background: #2a253c; color: #c8b2ff; }
.story-agent-grid article:nth-child(3) > i { background: #302b1d; color: #e4bf6d; }
.story-agent-grid article:nth-child(4) > i { background: #25302e; color: #91d8cb; }
.story-agent-grid b, .story-agent-grid span, .story-agent-grid p { display: block; }
.story-agent-grid b { color: #dce2e9; font-size: 9px; }
.story-agent-grid span { margin-top: 4px; color: #788493; font-size: 7px; }
.story-agent-grid p { margin: 9px 0 0; color: #9ba5b2; font-size: 7px; line-height: 1.35; }
.story-agent-grid > article > em { padding-top: 2px; color: #69c5a5; font-size: 7px; font-style: normal; white-space: nowrap; }

.story-project-card { margin-top: 14px; overflow: hidden; border: 1px solid #2c3540; border-radius: 13px; background: #0f151c; }
.story-project-card > header { display: flex; padding: 14px; border-bottom: 1px solid #28313b; align-items: flex-start; justify-content: space-between; gap: 14px; }
.story-project-card > header > div:first-child { min-width: 0; }
.story-project-card > header span { color: #7b87f1; font-size: 7px; font-weight: 720; letter-spacing: .08em; text-transform: uppercase; }
.story-project-card h4 { margin: 6px 0 0; color: #e9edf3; font-size: 17px; letter-spacing: -.03em; }
.story-project-card > header p { max-width: 560px; margin: 6px 0 0; color: #778392; font-size: 8px; line-height: 1.45; }
.story-project-team { display: flex; align-items: center; }
.story-project-team i, .story-project-team b { display: grid; width: 29px; height: 29px; margin-left: -7px; border: 2px solid #0f151c; border-radius: 9px; background: #263553; color: #b7c4ff; place-items: center; font-size: 7px; font-style: normal; }
.story-project-team i:first-child { margin-left: 0; }
.story-project-team b { border-radius: 999px; background: #1c2530; color: #8e99a7; }
.story-project-card > nav { display: flex; min-height: 38px; padding: 0 10px; border-bottom: 1px solid #28313b; align-items: center; gap: 5px; }
.story-project-card > nav button { min-height: 26px; padding: 0 9px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #7f8997; font-size: 7px; font-weight: 650; }
.story-project-card > nav button.is-active { border-color: #394459; background: #1c2431; color: #e2e7ee; }
.story-project-body { display: grid; min-height: 245px; grid-template-columns: minmax(0,1fr) 175px; }
.story-project-chat { padding: 10px; border-right: 1px solid #28313b; }
.story-project-chat > header { display: flex; min-height: 28px; padding: 0 4px; color: #8792a0; align-items: center; justify-content: space-between; font-size: 7px; }
.story-project-chat > article { display: grid; padding: 9px 5px; border-top: 1px solid #222a33; grid-template-columns: 28px minmax(0,1fr) auto; gap: 8px; }
.story-project-chat article > i, .story-forum-layout section > article > i { display: grid; width: 28px; height: 28px; border-radius: 8px; background: #24324d; color: #b6c2ff; place-items: center; font-size: 7px; font-style: normal; font-weight: 760; }
.story-project-chat article b { color: #cfd6df; font-size: 8px; }
.story-project-chat article p { margin: 4px 0 0; color: #8e99a7; font-size: 7px; line-height: 1.4; }
.story-project-chat article time { color: #5f6a77; font-size: 6px; }
.story-project-body > aside { padding: 13px; }
.story-project-body > aside > b { color: #cbd2db; font-size: 8px; }
.story-project-body > aside > span { display: grid; height: 7px; margin-top: 11px; overflow: hidden; border-radius: 999px; background: #242c37; grid-template-columns: 66% 1fr; }
.story-project-body > aside > span i { background: linear-gradient(90deg, #6877e9, #62bca6); }
.story-project-body > aside > span em { display: none; }
.story-project-body > aside p { margin: 10px 0 0; color: #778391; font-size: 7px; line-height: 1.5; }
.story-project-body > aside button { min-height: 27px; margin-top: 12px; padding: 0 9px; border: 1px solid #3a4658; border-radius: 8px; background: #18212c; color: #aeb8c5; font-size: 7px; }

.story-forum-layout { display: grid; min-height: 320px; margin-top: 14px; overflow: hidden; border: 1px solid #2b3540; border-radius: 13px; background: #0f151c; grid-template-columns: 190px minmax(0,1fr); }
.story-forum-layout > aside { padding: 10px; border-right: 1px solid #29323d; background: #10161e; }
.story-forum-layout > aside > div { display: flex; min-height: 31px; padding: 0 5px; align-items: center; justify-content: space-between; }
.story-forum-layout > aside > div b { color: #c9d0da; font-size: 8px; }
.story-forum-layout > aside > div button { width: 24px; height: 24px; border: 1px solid #344052; border-radius: 7px; background: #171f29; color: #a8b2c0; }
.story-forum-layout > aside > button { display: block; width: 100%; min-height: 54px; margin-top: 5px; padding: 8px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #8893a1; text-align: left; }
.story-forum-layout > aside > button.is-active { border-color: #364158; background: #1a2331; color: #e0e5ec; }
.story-forum-layout > aside > button span, .story-forum-layout > aside > button small { display: block; }
.story-forum-layout > aside > button span { font-size: 8px; font-weight: 650; }
.story-forum-layout > aside > button small { margin-top: 5px; color: #687584; font-size: 6px; }
.story-forum-layout > section { padding: 14px; }
.story-forum-layout > section > header { display: flex; padding-bottom: 12px; border-bottom: 1px solid #28313b; align-items: flex-start; justify-content: space-between; }
.story-forum-layout > section > header span { color: #d1a55b; font-size: 7px; font-weight: 720; text-transform: uppercase; }
.story-forum-layout > section > header h4 { margin: 5px 0 0; color: #e3e8ef; font-size: 15px; }
.story-forum-layout section > article { display: grid; padding: 11px 0; border-bottom: 1px solid #232b35; grid-template-columns: 28px minmax(0,1fr); gap: 9px; }
.story-forum-layout section > article b { color: #cbd2dc; font-size: 8px; }
.story-forum-layout section > article p { margin: 5px 0 0; color: #8995a3; font-size: 7px; line-height: 1.5; }
.story-forum-summary { display: grid; margin-top: 10px; padding: 10px; border: 1px solid #3b465c; border-radius: 10px; background: #18212d; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: 9px; }
.story-forum-summary > b { display: grid; width: 30px; height: 30px; border-radius: 9px; background: #6877e8; color: white; place-items: center; font-size: 7px; }
.story-forum-summary p { margin: 0; color: #a8b2bf; font-size: 7px; line-height: 1.45; }
.story-forum-summary button { min-height: 27px; padding: 0 9px; border: 0; border-radius: 8px; background: #edf0f4; color: #141820; font-size: 7px; font-weight: 680; }

.story-sheet { margin-top: 14px; overflow: hidden; border: 1px solid #2b3540; border-radius: 13px; background: #0f151c; }
.story-sheet > header { display: flex; min-height: 46px; padding: 0 11px; border-bottom: 1px solid #29323d; align-items: center; gap: 12px; }
.story-sheet > header > div:first-child { display: flex; min-width: 0; align-items: center; gap: 8px; }
.story-sheet > header button { width: 25px; height: 25px; border: 1px solid #354153; border-radius: 7px; background: #18212b; color: #9da8b6; }
.story-sheet > header b { overflow: hidden; color: #d9dfe7; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.story-sheet > header .story-agent-stack { margin-left: auto; }
.story-sheet > header > span { color: #69ba9f; font-size: 7px; }
.story-sheet > nav { display: flex; min-height: 37px; padding: 0 9px; border-bottom: 1px solid #29323d; background: #111820; align-items: center; gap: 6px; }
.story-sheet > nav button { min-height: 25px; padding: 0 8px; border: 0; border-radius: 7px; background: transparent; color: #7e8997; font-size: 7px; }
.story-sheet > nav button.is-active { background: #202a39; color: #d6dce5; }
.story-sheet > nav span { margin-left: 5px; color: #7d8af3; font-size: 8px; font-weight: 760; }
.story-sheet > nav b { min-width: 0; overflow: hidden; color: #8c98a7; font: 7px ui-monospace, SFMono-Regular, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.story-sheet-grid { display: grid; overflow-x: auto; grid-template-columns: 38px minmax(120px,1.2fr) minmax(130px,1fr) minmax(85px,.7fr) minmax(90px,.7fr); }
.story-sheet-grid > * { display: flex; min-height: 42px; padding: 7px 9px; border-right: 1px solid #27303a; border-bottom: 1px solid #27303a; color: #939eac; align-items: center; box-sizing: border-box; font-size: 7px; }
.story-sheet-grid > b { background: #151c25; color: #667281; justify-content: center; font-weight: 600; }
.story-sheet-grid > strong { background: #151c25; color: #bac2cd; font-weight: 680; }
.story-sheet-grid > em { color: #66bea0; font-style: normal; }
.story-sheet-grid > em.is-working { color: #d3a85e; }

@keyframes story-pop-in { from { opacity: 0; transform: scale(.72); } to { opacity: 1; transform: none; } }
@keyframes story-section-in { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: none; } }
@keyframes story-message-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 820px) {
  .story-screen { padding: 18px 15px 24px; }
  .story-mail-layout { grid-template-columns: 105px minmax(0, 1fr); }
  .story-channel-grid { grid-template-columns: 1fr 1fr; }
  .story-channel-grid article:last-child { grid-column: 1 / -1; }
  .story-browser-page { grid-template-columns: minmax(0, 1fr) 105px; padding: 18px; }
  .story-site-builder { grid-template-columns: 110px minmax(0, 1fr); }
  .story-client-layout { grid-template-columns: 140px minmax(0, 1fr); }
  .story-project-body { grid-template-columns: minmax(0,1fr) 145px; }
  .story-forum-layout { grid-template-columns: 155px minmax(0,1fr); }
  .story-messenger-workspace { grid-template-columns: 190px minmax(0,1fr); }
  .story-social-layout { grid-template-columns: 165px minmax(0,1fr); }
  .story-social-work { grid-template-columns: 1fr; }
  .story-messenger-composer > span { display: none; }
  .story-messenger-composer { grid-template-columns: 34px minmax(0,1fr) 34px; }
}

@media (max-width: 560px) {
  .business-story-thread { padding: 18px 12px 24px; }
  .story-message { max-width: 92%; }
  .story-screen { padding: 15px 11px 20px; }
  .story-screen-header { align-items: flex-start; flex-direction: column; }
  .story-screen-header > button { align-self: flex-start; }
  .story-mail-layout { grid-template-columns: 1fr; }
  .story-mail-layout > aside { display: flex; padding: 7px; overflow-x: auto; border-right: 0; border-bottom: 1px solid #26303a; }
  .story-mail-layout > aside button { min-width: 115px; }
  .story-channel-grid { grid-template-columns: 1fr; }
  .story-channel-grid article:last-child { grid-column: auto; }
  .story-messenger-workspace { min-height: 430px; grid-template-columns: 1fr; }
  .story-messenger-inbox { display: none; }
  .story-messenger-chat > header { grid-template-columns: 36px minmax(0,1fr) 20px 29px 29px; }
  .story-social-layout { grid-template-columns: 1fr; }
  .story-social-layout > aside { display: flex; padding: 7px; overflow-x: auto; border-right: 0; border-bottom: 1px solid #29323d; }
  .story-social-layout > aside > header { display: none; }
  .story-social-layout > aside > button { min-width: 160px; }
  .story-social-metrics { grid-template-columns: 1fr 1fr; }
  .story-social-metrics article:last-child { grid-column: 1 / -1; }
  .story-browser-page { min-height: 230px; padding: 16px; grid-template-columns: 1fr; }
  .story-browser-page aside { display: none; }
  .story-site-builder { grid-template-columns: 1fr; }
  .story-site-builder > aside { display: none; }
  .story-metrics { grid-template-columns: 1fr 1fr; }
  .story-metrics article:last-child { grid-column: 1 / -1; }
  .story-table > div { grid-template-columns: 70px minmax(0,1fr) 35px; }
  .story-table > div i { display: none; }
  .story-client-layout { grid-template-columns: 1fr; }
  .story-client-layout > aside { display: none; }
  .story-agent-summary { align-items: flex-start; flex-wrap: wrap; }
  .story-agent-summary > em { margin-left: 39px; }
  .story-agent-grid { grid-template-columns: 1fr; }
  .story-project-card > header { flex-direction: column; }
  .story-project-body { grid-template-columns: 1fr; }
  .story-project-chat { border-right: 0; border-bottom: 1px solid #28313b; }
  .story-forum-layout { grid-template-columns: 1fr; }
  .story-forum-layout > aside { display: none; }
  .story-forum-summary { grid-template-columns: 30px minmax(0,1fr); }
  .story-forum-summary button { grid-column: 2; justify-self: start; }
  .story-sheet > header { flex-wrap: wrap; padding-block: 8px; }
  .story-sheet > header > span { width: 100%; }
}

/* The demo adapts to its own rendered width, including narrow embeds in a wide viewport. */
@container promanos-workspace (max-width: 820px) {
  .demo-shell { position: relative; display: block; }
  .demo-rail { display: none; }
  .promanos-demo .scenario-sidebar.demo-business-nav {
    position: absolute;
    z-index: 24;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(290px, 88%);
    box-shadow: 22px 0 60px rgba(0, 0, 0, .52);
    transform: translateX(-103%);
    transition: transform 220ms ease;
  }
  .promanos-demo .scenario-sidebar.demo-business-nav.is-open { transform: none; }
  .promanos-demo .scenario-workspace.demo-main { height: 100%; }
  .demo-mobile-nav { display: grid; }
  .demo-conversation-header { padding-inline: 9px; gap: 7px; }
  .demo-header-leading { gap: 5px; }
  .demo-header-actions { gap: 2px; }
  .demo-participants { display: none !important; }
  .demo-search-popover { right: 8px; width: calc(100% - 16px); }
  .demo-language-popover,
  .demo-info-popover { right: 8px; }
  .story-screen { padding: 18px 15px 24px; }
  .story-mail-layout { grid-template-columns: 105px minmax(0, 1fr); }
  .story-channel-grid { grid-template-columns: 1fr 1fr; }
  .story-channel-grid article:last-child { grid-column: 1 / -1; }
  .story-browser-page { grid-template-columns: minmax(0, 1fr) 105px; padding: 18px; }
  .story-site-builder { grid-template-columns: 110px minmax(0, 1fr); }
  .story-client-layout { grid-template-columns: 140px minmax(0, 1fr); }
  .story-project-body { grid-template-columns: minmax(0,1fr) 145px; }
  .story-forum-layout { grid-template-columns: 155px minmax(0,1fr); }
  .story-messenger-workspace { grid-template-columns: 190px minmax(0,1fr); }
  .story-social-layout { grid-template-columns: 165px minmax(0,1fr); }
  .story-social-work { grid-template-columns: 1fr; }
  .story-messenger-composer > span { display: none; }
  .story-messenger-composer { grid-template-columns: 34px minmax(0,1fr) 34px; }
}

@container promanos-workspace (max-width: 560px) {
  .demo-titlebar { height: 30px; }
  .demo-shell { height: calc(100% - 30px); }
  .demo-splash { inset-block-start: 30px; }
  .demo-conversation-header { min-height: 58px; padding-inline: 7px; }
  .demo-header-popovers { top: 58px; }
  .demo-header-avatar { width: 31px !important; height: 31px !important; }
  .demo-header-avatar img { width: 28px; height: 28px; }
  .demo-header-copy .demo-header-breadcrumb,
  .demo-header-copy > small:last-child { display: none; }
  .demo-header-actions .demo-language-chip,
  .demo-connection,
  .demo-header-actions > button[data-demo-info-toggle] { display: none; }
  .demo-header-leading > button,
  .demo-header-actions > button { width: 29px; height: 29px; }
  .business-story-thread { padding: 18px 12px 24px; }
  .story-message { max-width: 92%; }
  .story-message.has-rich,
  .story-message.has-progress,
  .story-message.has-browser-widget { width: 100%; max-width: 100%; }
  .story-message.message-agent.continues-agent-group { width: calc(100% - 38px); max-width: calc(100% - 38px); }
  .story-rich-checklist { grid-template-columns: 1fr; }
  .story-rich-browser-toolbar { grid-template-columns: 27px minmax(0,1fr) 28px; }
  .story-rich-browser-toolbar > span:nth-child(-n+2) { display: none; }
  .story-rich-browser-page { padding: 15px 11px 12px; }
  .story-rich-browser-page section { grid-template-columns: 1fr; }
  .story-rich-browser-page article { grid-template-columns: minmax(0,1fr) auto; align-items: center; text-align: left; }
  .story-screen { padding: 14px 10px 20px; }
  .story-screen-header { padding-bottom: 13px; align-items: flex-start; flex-direction: column; gap: 11px; }
  .story-screen-header h3 { font-size: 19px; line-height: 1.08; }
  .story-screen-header p { font-size: 9px; }
  .story-screen-header > button { align-self: flex-start; }
  .story-mail-layout { grid-template-columns: 1fr; }
  .story-mail-layout > aside { display: flex; padding: 7px; overflow-x: auto; border-right: 0; border-bottom: 1px solid #26303a; scrollbar-width: thin; }
  .story-mail-layout > aside button { min-width: 115px; }
  .story-channel-grid { grid-template-columns: 1fr; }
  .story-channel-grid article:last-child { grid-column: auto; }
  .story-messenger-workspace { min-height: 430px; grid-template-columns: 1fr; }
  .story-messenger-inbox { display: none; }
  .story-messenger-chat > header { grid-template-columns: 36px minmax(0,1fr) 18px 29px 29px; }
  .story-messenger-approval { width: 100%; grid-template-columns: 1fr 1fr; }
  .story-messenger-approval p { grid-column: 1 / -1; }
  .story-messenger-approval button { width: 100%; min-height: 30px; }
  .story-social-layout { margin-top: 10px; grid-template-columns: 1fr; }
  .story-social-layout > aside { display: flex; padding: 7px; overflow-x: auto; border-right: 0; border-bottom: 1px solid #29323d; gap: 5px; scroll-snap-type: x proximity; scrollbar-width: thin; }
  .story-social-layout > aside > header { display: none; }
  .story-social-layout > aside > button { min-width: 152px; min-height: 48px; flex: 0 0 152px; scroll-snap-align: start; }
  .story-social-layout > section { padding: 9px; }
  .story-social-layout > section > header { min-height: 0; padding-bottom: 9px; align-items: flex-start; flex-direction: column; }
  .story-social-layout > section > header > div { width: 100%; }
  .story-social-layout > section > header button { width: 100%; min-height: 32px; }
  .story-social-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .story-social-metrics article { min-width: 0; padding: 8px 7px; }
  .story-social-metrics b { font-size: 13px; }
  .story-social-work { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .story-social-work > article { width: 100%; padding: 10px; }
  .story-social-work article > header { align-items: flex-start; }
  .story-social-work article > header b,
  .story-social-work article > header span { font-size: 8px; line-height: 1.35; }
  .story-social-inbox > p,
  .story-social-draft > p { margin-top: 8px; font-size: 9px; line-height: 1.48; overflow-wrap: anywhere; }
  .story-social-inbox > div { margin-top: 9px; align-items: flex-start; }
  .story-social-inbox > div > p { min-width: 0; }
  .story-social-inbox > div small { line-height: 1.35; overflow-wrap: anywhere; }
  .story-social-draft footer { margin-top: 10px; flex-wrap: wrap; }
  .story-social-draft footer button { min-height: 30px; flex: 1 1 90px; }
  .story-browser-page { min-height: 230px; padding: 16px; grid-template-columns: 1fr; }
  .story-browser-page aside { display: none; }
  .story-site-builder { grid-template-columns: 1fr; }
  .story-site-builder > aside { display: none; }
  .story-metrics { grid-template-columns: 1fr 1fr; }
  .story-metrics article:last-child { grid-column: 1 / -1; }
  .story-table > div { grid-template-columns: 70px minmax(0,1fr) 35px; }
  .story-table > div i { display: none; }
  .story-client-layout { grid-template-columns: 1fr; }
  .story-client-layout > aside { display: none; }
  .story-agent-summary { align-items: flex-start; flex-wrap: wrap; }
  .story-agent-summary > em { margin-left: 39px; }
  .story-agent-grid { grid-template-columns: 1fr; }
  .story-project-card > header { flex-direction: column; }
  .story-project-body { grid-template-columns: 1fr; }
  .story-project-chat { border-right: 0; border-bottom: 1px solid #28313b; }
  .story-forum-layout { grid-template-columns: 1fr; }
  .story-forum-layout > aside { display: none; }
  .story-forum-summary { grid-template-columns: 30px minmax(0,1fr); }
  .story-forum-summary button { grid-column: 2; justify-self: start; }
  .story-sheet > header { flex-wrap: wrap; padding-block: 8px; }
  .story-sheet > header > span { width: 100%; }
  .promanos-demo .scenario-composer.demo-composer { margin: 8px 8px 10px; padding: 5px; grid-template-columns: 34px minmax(0, 1fr) 34px 34px; gap: 4px; }
}

@container promanos-workspace (max-width: 400px) {
  .demo-titlebar strong { font-size: 9px; }
  .demo-window-actions i { width: 25px; }
  .demo-header-copy b { max-width: 92px; }
  .demo-header-actions > button[data-demo-search-toggle] { display: none; }
  .story-screen { padding-inline: 8px; }
  .story-social-metrics span,
  .story-social-metrics small { font-size: 6px; }
  .story-social-metrics b { font-size: 12px; }
  .story-messenger-chat > header { grid-template-columns: 34px minmax(0,1fr) 18px 28px; }
  .story-messenger-chat > header button:last-child { display: none; }
  .story-messenger-thread { padding-inline: 9px; }
  .story-messenger-thread-body > article { max-width: 92%; }
  .story-message.message-agent { grid-template-columns: 24px minmax(0,1fr); gap: 7px; }
  .story-message.message-agent.continues-agent-group { width: calc(100% - 31px); max-width: calc(100% - 31px); margin-left: 31px; grid-template-columns: minmax(0,1fr); gap: 0; }
  .story-message.has-browser-widget { padding: 6px; }
  .story-rich-browser-tab { width: 72%; }
  .story-rich-browser-toolbar { grid-template-columns: minmax(0,1fr) 28px; }
  .story-rich-browser-toolbar > span:nth-child(3) { display: none; }
  .story-rich-message h4,
  .story-rich-browser-page h4 { font-size: 13px; }
  .promanos-demo .scenario-composer.demo-composer { grid-template-columns: 34px minmax(0, 1fr) 34px; }
  .demo-composer > button[data-demo-toast="Voice"] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .demo-rail-business:not([hidden]),
  .story-nav-section,
  .story-message,
  .story-messenger-thread-body > article,
  .story-messenger-approval,
  .story-agent-activity > i,
  .story-agent-progress > header > span > i,
  .story-progress-stages > div.is-active > i { animation: none; }
}

/* Compact rhythm between the main homepage sections. */
.hero-index3 { padding-bottom: clamp(52px, 5vw, 72px); }
.capability-section { padding-top: clamp(52px, 5vw, 72px); }
.app-builder-section { padding-bottom: clamp(52px, 5vw, 72px); }
.pricing-home { padding-top: clamp(52px, 5vw, 72px); padding-bottom: clamp(52px, 5vw, 72px); }
.final-cta { padding-top: clamp(52px, 5vw, 72px); }

@media (max-width: 620px) {
  .hero-index3,
  .capability-section,
  .app-builder-section,
  .pricing-home,
  .final-cta { padding-top: 48px; padding-bottom: 48px; }

  .hero-index3 { padding-top: 46px; }
}
.footer-inner.footer-without-brand { grid-template-columns: minmax(0, 1fr) auto; }
.footer-inner.footer-without-brand nav { justify-content: flex-start; }

/* Simplified models-to-apps story. */
.model-apps-console.is-simple { border-radius: 16px; box-shadow: 0 22px 60px rgba(0, 0, 0, .3); }
.model-apps-console.is-simple .model-orchestra { padding: 22px; }
.model-apps-console.is-simple .model-orchestra > header { gap: 6px; }
.model-apps-console.is-simple .model-orchestra > header h3 { font-size: 15px; }
.model-apps-console.is-simple .model-source-strip { margin-top: 16px; padding: 10px 12px 11px; border: 1px solid #29313b; border-radius: 12px; background: #11161c; }
.model-apps-console.is-simple .model-orchestra-grid { margin: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.model-apps-console.is-simple .model-orchestra-grid article { min-height: 54px; padding: 6px 10px; border: 0; border-right: 1px solid #29313b; border-radius: 0; background: transparent; grid-template-columns: 27px minmax(0, 1fr); }
.model-apps-console.is-simple .model-orchestra-grid article:last-child { border-right: 0; }
.model-apps-console.is-simple .model-orchestra-grid small { margin-top: 3px; }
.model-apps-console.is-simple .specialized-models { display: grid; min-height: 0; margin-top: 10px; padding: 11px 0 0; border: 0; border-top: 1px solid #29313b; border-radius: 0; background: transparent; grid-template-columns: minmax(190px, .9fr) minmax(0, 1.4fr); align-items: center; gap: 12px; }
.model-apps-console.is-simple .specialized-models header { gap: 4px; }
.model-apps-console.is-simple .specialized-model-cloud { margin-top: 0; justify-content: flex-end; }
.model-apps-console.is-simple .pro1-model-layer { margin-top: 12px; padding: 14px; grid-template-columns: minmax(0, 1.25fr) minmax(230px, .75fr); align-items: center; gap: 16px; }
.model-apps-console.is-simple .pro1-model-copy > i { width: 46px; height: 46px; }
.model-apps-console.is-simple .pro1-model-copy b { font-size: 10px; }
.model-apps-console.is-simple .pro1-model-copy p { max-width: 470px; }
.pro1-result { display: grid; min-width: 0; min-height: 54px; padding-left: 16px; border-left: 1px solid #35405a; grid-template-columns: 30px minmax(0, 1fr) 22px; align-items: center; gap: 9px; }
.pro1-result img { width: 30px; height: 30px; border-radius: 8px; }
.pro1-result b,
.pro1-result small { display: block; }
.pro1-result b { color: #e8ebf1; font-size: 9px; line-height: 1.35; }
.pro1-result small { margin-top: 4px; color: #8490a0; font-size: 7px; line-height: 1.35; }
.pro1-result em { display: grid; width: 22px; height: 22px; border-radius: 50%; color: #d9ffed; background: #557a69; place-items: center; font-size: 8px; font-style: normal; }
.model-apps-console.is-simple .ready-apps { padding: 18px 22px 20px; }
.model-apps-console.is-simple .ready-apps-grid { margin-top: 12px; gap: 6px; }
.model-apps-console.is-simple .ready-apps-grid article { min-height: 42px; background: #131920; }
.model-apps-console.is-simple .ready-apps-grid .ready-app-custom { min-height: 44px; }

@media (max-width: 620px) {
  .model-apps-console.is-simple .model-orchestra,
  .model-apps-console.is-simple .ready-apps { padding: 14px; }
  .model-apps-console.is-simple .model-source-strip { padding: 9px; }
  .model-apps-console.is-simple .model-orchestra-grid { grid-template-columns: 1fr 1fr; gap: 5px; }
  .model-apps-console.is-simple .model-orchestra-grid article { min-height: 58px; padding: 7px; border: 0; border-radius: 8px; background: #161c24; }
  .model-apps-console.is-simple .specialized-models { grid-template-columns: 1fr; }
  .model-apps-console.is-simple .specialized-model-cloud { margin-top: 4px; justify-content: flex-start; }
  .model-apps-console.is-simple .pro1-model-layer { padding: 12px; grid-template-columns: 1fr; gap: 12px; }
  .pro1-result { padding: 11px 0 0; border-top: 1px solid #35405a; border-left: 0; }
  .model-apps-console.is-simple .ready-apps-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 420px) {
  .model-apps-console.is-simple .ready-apps-grid { grid-template-columns: 1fr; }
  .model-apps-console.is-simple .ready-apps-grid .ready-app-custom { grid-column: auto; }
}

@media (max-width: 1050px) {
  .footer-inner.footer-without-brand { grid-template-columns: 1fr; justify-items: center; }
  .footer-inner.footer-without-brand nav { justify-content: center; }
}

/* Final mobile containment: keep the production header and hero inside the viewport. */
@media (max-width: 620px) {
  .product-header-inner {
    width: calc(100% - 24px);
    min-width: 0;
    gap: 8px;
  }
  .product-nav { display: none; }
  .product-brand { min-width: 0; margin-right: auto; }
  .product-brand span { display: inline; }
  .product-header-actions { min-width: 0; margin-left: auto; gap: 6px; }
  .header-download {
    width: 44px;
    min-width: 44px;
    padding: 0;
    justify-content: center;
  }
  .header-download span { display: none; }
  .page-language {
    width: 68px;
    min-width: 68px;
    height: 44px;
    padding: 0 21px 0 30px;
    background-position: left 9px center, right 8px center;
    background-size: 16px 16px, 8px 6px;
  }
  .hero-index3 .hero-copy,
  .hero-index3 .hero-product { width: 100%; min-width: 0; }
  .hero-index3 h1 {
    max-width: 100%;
    font-size: clamp(36px, 11vw, 46px);
    line-height: 1.02;
    overflow-wrap: anywhere;
    text-wrap: pretty;
  }
  .hero-index3 .hero-lead { max-width: 100%; font-size: 14.5px; }
}

@media (max-width: 350px) {
  .product-brand span { display: none; }
}