:root {
  --ink: #17211b;
  --muted: #5b665f;
  --line: #d8dfd8;
  --paper: #f7f8f4;
  --panel: #ffffff;
  --sage: #657d63;
  --blue: #2f5f84;
  --gold: #b5822d;
  --red: #9d4f45;
  --shadow: 0 18px 60px rgba(23, 33, 27, 0.12);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
select,
input,
textarea {
  font: inherit;
}

.app-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  background: #ffffff;
  border-right: 1px solid var(--line);
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
}

.brand-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #ffffff;
  background: var(--ink);
  border-radius: 8px;
  font-weight: 800;
}

.brand span,
.signal-box span,
.account-box span,
.integration-grid span,
.mode-grid span,
.tool-grid span,
.tool-runs span,
.pricing-grid span,
.approval-board span {
  display: block;
  color: var(--muted);
  font-size: 13px;
}

.nav-list {
  display: grid;
  gap: 6px;
}

.nav-item {
  width: 100%;
  padding: 11px 12px;
  color: var(--muted);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.nav-item.active,
.nav-item:hover {
  color: var(--ink);
  background: #eef2ea;
}

.sidebar-section {
  display: grid;
  gap: 8px;
}

.view-switcher span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.eyebrow {
  margin: 0;
  color: var(--sage);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

select,
input,
textarea {
  width: 100%;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

select {
  padding: 10px 12px;
}

input {
  min-height: 38px;
  padding: 8px 10px;
}

textarea {
  min-height: 154px;
  padding: 16px;
  resize: vertical;
  line-height: 1.5;
}

.signal-box,
.account-box {
  margin-top: auto;
  padding: 14px;
  background: #f3f6ef;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.account-box {
  margin-top: 0;
}

#accountPanel {
  display: grid;
  gap: 8px;
}

#accountPanel button {
  min-height: 34px;
  padding: 0 12px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

.password-reset-panel {
  display: grid;
  gap: 8px;
}

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

.main {
  min-width: 0;
  padding: 28px;
}

.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.metric-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.metric-strip article {
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.metric-strip span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.metric-strip strong {
  display: block;
  margin-top: 5px;
  font-size: 24px;
}

.revenue-readiness {
  display: grid;
  gap: 16px;
  margin-bottom: 18px;
  padding: 18px;
  background: linear-gradient(135deg, #ffffff 0%, #eef6f1 100%);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.why-homeclaw-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.why-homeclaw-grid article,
.roi-panel,
.setup-progress-panel,
.demo-reset-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

.why-homeclaw-grid article {
  display: grid;
  gap: 6px;
  padding: 14px;
}

.why-homeclaw-grid strong {
  color: var(--ink);
  font-size: 15px;
}

.why-homeclaw-grid span,
.demo-reset-card p,
.setup-score-row span {
  color: var(--muted);
  line-height: 1.45;
}

.revenue-readiness-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr 0.8fr;
  gap: 12px;
}

.roi-panel,
.setup-progress-panel,
.demo-reset-card {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.roi-input-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.roi-input-grid label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.roi-input-grid input {
  min-height: 40px;
  width: 100%;
  padding: 0 11px;
  color: var(--ink);
  background: #f8faf7;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
}

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

.roi-result-grid article {
  padding: 12px;
  background: #0f2f4a;
  border-radius: 8px;
  color: #ffffff;
}

.roi-result-grid span {
  display: block;
  color: rgba(255, 255, 255, 0.74);
  font-size: 12px;
}

.roi-result-grid strong {
  display: block;
  margin-top: 5px;
  font-size: 22px;
}

.setup-score-row {
  display: grid;
  gap: 4px;
}

.setup-score-row strong {
  font-size: 28px;
}

.setup-progress-bar {
  height: 10px;
  overflow: hidden;
  background: #e7ece6;
  border-radius: 999px;
}

.setup-progress-bar span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--blue), #2f7d52);
  border-radius: inherit;
  transition: width 180ms ease;
}

.setup-progress-list {
  display: grid;
  gap: 8px;
}

.setup-progress-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  background: #f8faf7;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.setup-progress-item span {
  order: 2;
  min-width: 44px;
  padding: 4px 8px;
  text-align: center;
  color: var(--muted);
  background: #edf2ec;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.setup-progress-item.ready span {
  color: #14532d;
  background: #dcfce7;
}

.setup-progress-item.missing span {
  color: #7c2d12;
  background: #ffedd5;
}

.demo-reset-card button {
  min-height: 40px;
  padding: 0 14px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

#revenueReadinessMessage {
  min-height: 18px;
  color: var(--muted);
  font-size: 12px;
}

h1,
h2 {
  margin: 0;
  letter-spacing: 0;
}

h1 {
  max-width: 850px;
  font-size: 32px;
  line-height: 1.12;
}

h2 {
  font-size: 20px;
}

.topbar-actions,
.quick-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.primary-button,
.icon-button,
.quick-prompts button,
.approval-board button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
}

.primary-button {
  color: #ffffff;
  background: var(--blue);
}

.icon-button,
.quick-prompts button,
.approval-board button {
  color: var(--ink);
  background: #ffffff;
  border-color: var(--line);
}

.panel {
  display: none;
}

.panel.active {
  display: block;
}

.owner-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding: 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.owner-action-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.owner-action-grid button {
  display: grid;
  gap: 8px;
  min-height: 120px;
  padding: 18px;
  text-align: left;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  cursor: pointer;
}

.owner-action-grid strong {
  font-size: 18px;
}

.owner-action-grid span {
  color: var(--muted);
  line-height: 1.45;
}

.owner-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.owner-status-grid article {
  display: grid;
  gap: 6px;
  padding: 16px;
  background: #f8faf6;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.owner-status-grid span {
  color: var(--sage);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.owner-status-grid p {
  margin: 0;
  color: var(--muted);
}

.brain-command-card {
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
  padding: 18px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.guided-onboarding-card {
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
  padding: 18px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.onboarding-step-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.onboarding-step-grid label,
.onboarding-generate-step {
  display: grid;
  gap: 8px;
  padding: 14px;
  background: #f8faf6;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font-weight: 800;
}

.onboarding-step-grid label span,
.onboarding-generate-step span {
  width: fit-content;
  padding: 4px 8px;
  color: var(--sage);
  background: #eef2ea;
  border-radius: 999px;
  font-size: 11px;
  text-transform: uppercase;
}

.onboarding-step-grid input {
  min-height: 40px;
  width: 100%;
  padding: 0 11px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  font-weight: 500;
}

.onboarding-step-grid label button,
.onboarding-action-grid button,
.onboarding-action-grid a {
  min-height: 36px;
  padding: 0 12px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
}

.onboarding-generate-step p,
.onboarding-status-row,
.onboarding-action-grid span {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.onboarding-status-row {
  padding: 10px 12px;
  background: #f8faf6;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.onboarding-next-actions {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #eef6f1;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.onboarding-action-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.onboarding-action-grid button,
.onboarding-action-grid a {
  display: grid;
  gap: 6px;
  align-content: start;
  min-height: 92px;
  padding: 14px;
  text-decoration: none;
}

.onboarding-action-grid strong {
  color: var(--ink);
}

.brain-command-card textarea {
  min-height: 94px;
}

.brain-command-actions {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.brain-command-actions span,
.brain-result-card p,
.brain-plan-card li,
.brain-plan-card p,
.brain-understood p {
  color: var(--muted);
  line-height: 1.45;
}

.brain-examples button {
  background: #ffffff;
  border-color: var(--line);
}

.brain-result-panel {
  display: grid;
  gap: 12px;
}

.brain-result-summary,
.brain-created-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.brain-created-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.brain-understood,
.brain-plan-card,
.brain-result-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  background: #f8faf6;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.brain-result-card span {
  width: fit-content;
  padding: 4px 8px;
  color: var(--sage);
  background: #eef2ea;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.brain-result-card.needs-approval span {
  color: #775500;
  background: #fff4cf;
}

.brain-result-card.placeholder-until-connected span,
.brain-result-card.blocked-until-configured span {
  color: var(--red);
  background: #f9e6e3;
}

.brain-result-card a,
.brain-understood a {
  color: var(--blue);
  font-weight: 800;
}

.brain-plan-card ol {
  margin: 0;
  padding-left: 20px;
}

.brain-action-timeline {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.brain-action-timeline h3 {
  margin: 0;
}

.brain-action-timeline ol {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.brain-timeline-item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  background: #f8faf6;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.brain-timeline-marker {
  width: 12px;
  height: 12px;
  margin-top: 4px;
  background: var(--sage);
  border-radius: 999px;
}

.brain-timeline-item.needs_approval .brain-timeline-marker,
.brain-timeline-item.placeholder .brain-timeline-marker {
  background: var(--gold);
}

.brain-timeline-item.blocked .brain-timeline-marker,
.brain-timeline-item.failed .brain-timeline-marker {
  background: var(--red);
}

.brain-timeline-item div:last-child {
  display: grid;
  gap: 5px;
}

.brain-timeline-item span,
.brain-timeline-item em {
  width: fit-content;
  padding: 3px 8px;
  color: var(--sage);
  background: #eef2ea;
  border-radius: 999px;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.brain-timeline-item.needs_approval span,
.brain-timeline-item.placeholder span {
  color: #775500;
  background: #fff4cf;
}

.brain-timeline-item.blocked span,
.brain-timeline-item.failed span {
  color: var(--red);
  background: #f9e6e3;
}

.brain-timeline-item p,
.brain-timeline-item small {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.brain-timeline-item button,
.brain-timeline-item a {
  width: fit-content;
  min-height: 32px;
  padding: 0 12px;
  color: #ffffff;
  background: var(--blue);
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 800;
  text-decoration: none;
}

.brain-timeline-item.blocked button,
.brain-timeline-item.placeholder button {
  color: var(--ink);
  background: #ffffff;
  border-color: var(--line);
}

.customer-launch-card {
  display: grid;
  gap: 14px;
  padding: 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

#customerLaunchList {
  display: grid;
  gap: 10px;
}

#customerLaunchList article {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  background: #f8faf6;
  border: 1px solid var(--line);
  border-radius: 8px;
}

#customerLaunchList article.ready {
  border-left: 5px solid var(--sage);
}

#customerLaunchList article.missing {
  border-left: 5px solid var(--gold);
}

.client-power-grid,
.growth-launchpad-grid,
.market-proof-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.client-power-grid article,
.growth-launchpad-grid button,
.market-proof-grid article {
  display: grid;
  gap: 8px;
  padding: 14px;
  text-align: left;
  background: #f8faf6;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

.client-power-grid p,
.growth-launchpad-grid span,
.market-proof-grid p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.growth-launchpad-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.growth-launchpad-grid button:hover {
  border-color: var(--blue);
  box-shadow: 0 10px 30px rgba(47, 95, 132, 0.12);
}

#customerLaunchList p {
  margin: 4px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

#customerLaunchList button {
  min-height: 34px;
  padding: 0 12px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

.studio-grid {
  display: grid;
  grid-template-columns: minmax(360px, 0.95fr) minmax(360px, 1.05fr);
  gap: 18px;
}

.builder,
.build-plan,
.panel > .section-header,
.mode-grid article,
.capability-grid article,
.tool-grid article,
.tool-runs article,
.integration-grid article,
.approval-board article,
.pricing-grid article {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.builder,
.build-plan {
  display: grid;
  gap: 16px;
  padding: 20px;
  align-content: start;
}

.section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.panel > .section-header {
  margin-bottom: 18px;
  padding: 20px;
}

.status-pill {
  padding: 6px 9px;
  color: #ffffff;
  background: var(--sage);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.chat-window {
  display: grid;
  gap: 10px;
  min-height: 176px;
  padding: 14px;
  background: #f5f6f1;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.message {
  max-width: 86%;
  padding: 11px 12px;
  border-radius: 8px;
  line-height: 1.45;
}

.message.user {
  justify-self: end;
  color: #ffffff;
  background: var(--blue);
}

.message.agent {
  background: #ffffff;
  border: 1px solid var(--line);
}

.agent-response {
  display: grid;
  gap: 10px;
  max-width: 100%;
}

.agent-response h3,
.agent-response p,
.agent-response ul,
.agent-response ol {
  margin: 0;
}

.agent-response h3 {
  margin-top: 4px;
  font-size: 15px;
}

.agent-response ul,
.agent-response ol {
  padding-left: 20px;
}

.agent-response li {
  margin-bottom: 5px;
}

.plan-output,
.mode-grid,
.capability-grid,
.tool-grid,
.tool-runs,
.integration-grid,
.approval-board,
.pricing-grid {
  display: grid;
  gap: 12px;
}

.plan-summary {
  margin: 0;
  padding: 14px;
  color: var(--muted);
  background: #f5f6f1;
  border-radius: 8px;
  line-height: 1.5;
}

.plan-block {
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.plan-block ul,
.approval-levels {
  margin: 10px 0 0;
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.6;
}

.mode-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.capability-grid,
.tool-grid,
.integration-grid,
.pricing-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mode-grid article,
.capability-grid article,
.tool-grid article,
.tool-runs article,
.integration-grid article,
.approval-board article,
.pricing-grid article {
  padding: 16px;
  box-shadow: none;
}

.tool-grid article {
  display: grid;
  gap: 10px;
}

.tool-grid p,
.empty-state {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.action-empty-state {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--soft);
  color: var(--text);
}

.action-empty-state span {
  color: var(--muted);
}

.action-empty-state button {
  justify-self: start;
}

.journey-quick-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.journey-quick-actions a,
.journey-quick-actions button {
  display: grid;
  gap: 6px;
  min-height: 92px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--text);
  text-align: left;
  text-decoration: none;
  box-shadow: var(--shadow-soft);
}

.journey-quick-actions a:hover,
.journey-quick-actions button:hover {
  transform: translateY(-1px);
  border-color: var(--primary);
}

.journey-quick-actions span {
  color: var(--muted);
  font-size: 0.9rem;
}

.journey-quick-actions button[disabled] {
  opacity: 0.58;
  cursor: not-allowed;
  box-shadow: none;
}

.tool-grid button {
  justify-self: start;
  min-height: 34px;
  padding: 0 12px;
  color: #ffffff;
  background: var(--blue);
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
}

.tool-runs {
  margin-top: 18px;
}

.tool-runs pre {
  max-height: 220px;
  overflow: auto;
  margin: 12px 0 0;
  padding: 12px;
  color: #233229;
  background: #f5f6f1;
  border: 1px solid var(--line);
  border-radius: 8px;
  white-space: pre-wrap;
}

.integration-grid em {
  display: inline-block;
  margin-top: 12px;
  color: var(--gold);
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.approval-board {
  grid-template-columns: 1fr;
}

#approvalBoard {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

#approvalBoard article {
  display: grid;
  gap: 12px;
}

.approval-board button {
  justify-self: start;
}

.approval-actions {
  display: flex;
  gap: 8px;
}

.integration-grid p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

#integrationMessage {
  display: block;
  margin-bottom: 12px;
}

.connector-builder {
  display: grid;
  grid-template-columns: minmax(320px, 0.75fr) minmax(420px, 1fr);
  gap: 18px;
  margin-bottom: 18px;
}

.connector-card {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

#customConnectorList {
  display: grid;
  gap: 10px;
}

#customConnectorList article {
  display: grid;
  gap: 8px;
  padding: 14px;
  background: #f8faf6;
  border: 1px solid var(--line);
  border-radius: 8px;
}

#customConnectorList p,
#customConnectorList li,
#customConnectorList summary,
#customConnectorList small {
  color: var(--muted);
  line-height: 1.45;
}

#customConnectorList ul {
  margin: 0;
  padding-left: 18px;
}

#customConnectorList button {
  min-height: 34px;
  padding: 0 12px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

.integration-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.integration-grid details {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.integration-grid summary {
  cursor: pointer;
  color: var(--blue);
  font-weight: 700;
}

.integration-grid button {
  justify-self: start;
  min-height: 34px;
  margin-top: 12px;
  padding: 0 12px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

.pricing-grid article {
  display: grid;
  gap: 10px;
}

.pricing-grid p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

@media (max-width: 1020px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
  }

  .studio-grid,
  .metric-strip,
  .why-homeclaw-grid,
  .revenue-readiness-grid,
  .roi-input-grid,
  .roi-result-grid,
  .onboarding-step-grid,
  .onboarding-action-grid,
  .journey-quick-actions,
  .owner-action-grid,
  .owner-status-grid,
  .brain-command-actions,
  .brain-result-summary,
  .brain-created-grid,
  .client-power-grid,
  .growth-launchpad-grid,
  .mode-grid,
  .capability-grid,
  .tool-grid,
  .integration-grid,
  #approvalBoard,
  .approval-board,
  .pricing-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .main,
  .sidebar {
    padding: 18px;
  }

  .topbar {
    display: grid;
  }

  h1 {
    font-size: 25px;
  }
}

.operations-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.7fr) minmax(360px, 1fr);
  gap: 18px;
}

.ops-form,
.ops-list,
.finance-card {
  display: grid;
  gap: 16px;
  align-content: start;
  padding: 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.messaging-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.75fr) minmax(420px, 1fr);
  gap: 18px;
}

.agency-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.65fr) minmax(420px, 1fr);
  gap: 18px;
  margin-bottom: 18px;
}

.workflow-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.65fr) minmax(420px, 1fr);
  gap: 18px;
}

.workflow-card {
  display: grid;
  gap: 16px;
  align-content: start;
  padding: 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.settings-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.7fr) minmax(360px, 1fr);
  gap: 18px;
}

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

.consent-grid article,
.support-ops-grid article {
  display: grid;
  gap: 6px;
  padding: 14px;
  background: #f8faf6;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.consent-grid article.partial,
.support-ops-grid article.partial {
  border-left: 5px solid var(--blue);
}

.consent-grid article.blocked,
.support-ops-grid article.blocked {
  border-left: 5px solid var(--gold);
}

.consent-grid span,
.support-ops-grid span {
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.consent-grid p,
.consent-grid small,
.support-ops-grid p,
.support-ops-grid small {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.support-ops-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.marketing-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.75fr) minmax(420px, 1fr);
  gap: 18px;
}

.site-builder-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.75fr) minmax(420px, 1fr);
  gap: 18px;
}

.marketing-card,
.site-builder-card {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.marketing-card.wide,
.site-builder-card.wide {
  grid-column: 1 / -1;
}

.marketing-requirements,
#campaignList,
#prospectPipelineList,
#salesKitResult,
.campaign-assets,
.site-build-summary,
#siteBuildList,
.site-build-assets {
  display: grid;
  gap: 10px;
}

.marketing-requirements article,
#campaignList article,
#prospectPipelineList article,
#salesKitResult article,
.campaign-assets section,
.site-build-summary article,
#siteBuildList article,
.site-build-assets section {
  display: grid;
  gap: 8px;
  padding: 14px;
  background: #f8faf6;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.campaign-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.campaign-assets {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.site-build-assets {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.publish-center-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.7fr) minmax(360px, 1fr);
  gap: 14px;
}

.publish-center-grid section,
#publishReadinessList article {
  display: grid;
  gap: 10px;
  padding: 14px;
  background: #f8faf6;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.publish-url-card {
  display: grid;
  gap: 6px;
  padding: 12px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.publish-url-card span,
.publish-url-card small {
  color: var(--muted);
}

.publish-url-card strong {
  overflow-wrap: anywhere;
}

.publish-url-card button {
  justify-self: start;
}

#publishReadinessList {
  display: grid;
  gap: 10px;
}

#publishReadinessList article.ready {
  border-left: 5px solid var(--sage);
}

#publishReadinessList article.missing {
  border-left: 5px solid var(--gold);
}

#publishReadinessList span,
#publishReadinessList p {
  color: var(--muted);
  line-height: 1.45;
}

.marketing-requirements span,
.site-build-summary span,
#campaignList span,
#campaignList p,
#campaignList li,
#campaignList summary,
#prospectPipelineList span,
#prospectPipelineList p,
#prospectPipelineList small,
#salesKitResult span,
#salesKitResult p,
#siteBuildList span,
#siteBuildList li {
  color: var(--muted);
  line-height: 1.45;
}

#campaignList ul,
#siteBuildList ul {
  margin: 0;
  padding-left: 18px;
}

.generated-site-preview {
  display: grid;
  grid-template-columns: minmax(260px, 0.6fr) minmax(360px, 1fr);
  gap: 14px;
  margin: 14px 0;
  padding: 14px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.generated-site-preview iframe {
  width: 100%;
  min-height: 420px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.generated-site-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.generated-site-actions a {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  color: var(--blue);
  font-weight: 800;
  text-decoration: none;
  border: 1px solid var(--blue);
  border-radius: 8px;
}

.pilot-mode-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.45fr);
  gap: 14px;
  align-items: start;
  padding: 16px;
  background: #f8fbf7;
  border: 1px solid #bfd0bf;
  border-left: 5px solid var(--sage);
  border-radius: 8px;
}

.pilot-mode-card.compact {
  margin-top: 14px;
}

.pilot-mode-card h2,
.pilot-mode-card p {
  margin: 0;
}

.pilot-mode-card strong {
  display: block;
  margin-bottom: 5px;
}

.placeholder-status-grid {
  display: grid;
  gap: 8px;
}

.placeholder-status-grid span {
  display: block;
  padding: 9px 10px;
  color: #5f4920;
  background: #fff6dc;
  border: 1px solid #e7cd82;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
}

.pilot-first-run-checklist {
  margin-top: 14px;
  padding: 14px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.pilot-first-run-checklist.compact {
  background: var(--panel);
}

.pilot-first-run-checklist ol {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.pilot-first-run-checklist li {
  min-height: 44px;
  padding: 10px;
  color: var(--ink);
  background: #f6f8f2;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
}

.demo-launcher {
  margin-top: 14px;
  padding: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.demo-launcher ol {
  margin: 8px 0 0;
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.5;
}

.generated-ops-sync {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.generated-ops-sync span,
.generated-ops-latest span,
.generated-ops-latest p {
  color: var(--muted);
}

.generated-ops-sync button {
  width: max-content;
}

.generated-ops-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(88px, 1fr));
  gap: 8px;
}

.generated-ops-metrics article,
.generated-ops-latest {
  padding: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.generated-ops-metrics span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
}

.generated-ops-metrics strong {
  display: block;
  margin-top: 4px;
  font-size: 1.25rem;
}

.builder-preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.builder-preset-row button {
  min-height: 34px;
  padding: 0 12px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

.generated-business-snapshot {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.generated-business-snapshot > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(100px, 1fr));
  gap: 8px;
}

.generated-business-snapshot article {
  padding: 10px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.generated-business-snapshot strong {
  display: block;
  font-size: 1.35rem;
}

.generated-business-snapshot span,
.generated-business-snapshot p {
  margin: 0;
  color: var(--muted);
}

.latest-app-launch-strip {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) repeat(4, auto);
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.latest-app-launch-strip span {
  display: block;
  color: var(--muted);
}

.latest-app-launch-strip a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  color: #ffffff;
  background: var(--brand);
  border-radius: 8px;
  text-decoration: none;
}

.generated-handoff-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.generated-handoff-card span,
.generated-handoff-card li {
  color: var(--muted);
}

.generated-handoff-card ol {
  margin: 10px 0 0;
  padding-left: 20px;
  line-height: 1.5;
}

.base44-dashboard-section {
  display: grid;
  gap: 14px;
  padding: 16px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.base44-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 12px;
}

.base44-dashboard-grid article {
  display: grid;
  gap: 8px;
  padding: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.base44-dashboard-grid span,
.base44-dashboard-grid p {
  margin: 0;
  color: var(--muted);
}

.workspace-invite-panel,
.workspace-user-panel {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(260px, 1fr);
  gap: 12px;
  margin-top: 12px;
}

.workspace-invite-panel > div,
.workspace-invite-panel article,
.workspace-user-panel > div,
.workspace-user-panel article {
  display: grid;
  gap: 8px;
  padding: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.workspace-invite-panel span,
.workspace-invite-panel small,
.workspace-user-panel span {
  color: var(--muted);
}

.workspace-user-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.workspace-user-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 0.4fr) minmax(120px, 0.4fr) auto;
  gap: 8px;
  align-items: center;
}

.workspace-publish-builder,
.workspace-data-builder,
.workspace-analytics-builder,
.workspace-growth-builder,
.workspace-code-builder,
.workspace-automation-builder,
.workspace-integration-builder {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(260px, 1fr);
  gap: 12px;
  margin-top: 12px;
}

.workspace-publish-builder > div,
.workspace-data-builder > div,
.workspace-analytics-builder > div,
.workspace-analytics-builder article,
.workspace-growth-builder > div,
.workspace-code-builder > div,
.workspace-automation-builder > div,
.workspace-integration-builder > div,
.workspace-integration-builder article {
  display: grid;
  gap: 8px;
  padding: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.workspace-publish-builder button,
.workspace-data-builder button,
.workspace-growth-builder button,
.workspace-code-builder button,
.workspace-automation-builder button {
  display: grid;
  justify-items: start;
  gap: 4px;
  min-height: auto;
  padding: 12px;
  text-align: left;
  background: #fff;
  color: var(--ink);
  border-color: var(--line);
}

.workspace-publish-builder span,
.workspace-data-builder span,
.workspace-analytics-builder span,
.workspace-growth-builder span,
.workspace-code-builder span,
.workspace-automation-builder span,
.workspace-integration-builder span,
.workspace-publish-builder small {
  color: var(--muted);
}

.workspace-code-builder a {
  color: var(--blue);
  font-weight: 800;
}

.workspace-automation-builder > section,
.workspace-automation-builder .workspace-workflow-form,
.workspace-automation-builder .workspace-workflow-columns {
  grid-column: 1 / -1;
}

.workspace-automation-builder > section:first-of-type {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 8px;
}

.workspace-automation-builder > section:first-of-type article,
.workspace-workflow-form,
.workspace-workflow-columns > div,
.workspace-workflow-columns article {
  display: grid;
  gap: 8px;
  padding: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.workspace-workflow-form input,
.workspace-workflow-form textarea {
  width: 100%;
  min-height: 40px;
  padding: 10px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.workspace-workflow-form button,
.workspace-workflow-columns button {
  width: max-content;
}

.workspace-workflow-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 12px;
}

.workspace-workflow-columns small {
  color: var(--muted);
}

.workspace-integration-builder article > div {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.workspace-analytics-alerts {
  grid-column: 1 / -1;
}

.workspace-search-results {
  display: grid;
  gap: 14px;
  padding: 16px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.workspace-search-results > div:last-child {
  display: grid;
  gap: 10px;
}

.workspace-search-results article {
  display: grid;
  grid-template-columns: 100px minmax(160px, 1fr) minmax(220px, 1.4fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.workspace-search-results span,
.workspace-search-results p {
  margin: 0;
  color: var(--muted);
}

.generated-record-manager {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.generated-record-manager select,
.generated-record-manager textarea {
  width: 100%;
  min-height: 40px;
  padding: 10px;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.generated-record-manager button {
  width: max-content;
}

.generated-record-list {
  display: grid;
  gap: 8px;
}

.generated-record-list article {
  display: grid;
  gap: 8px;
  padding: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.generated-record-list article > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.generated-record-list span,
.generated-record-list p {
  margin: 0;
  color: var(--muted);
}

.generated-version-manager {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.generated-version-manager input,
.generated-version-manager textarea {
  width: 100%;
  min-height: 40px;
  padding: 10px;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.generated-version-manager button {
  width: max-content;
}

.generated-version-list {
  display: grid;
  gap: 8px;
}

.generated-version-list article {
  padding: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.generated-version-list span,
.generated-version-list p,
.generated-version-list small {
  margin: 0;
  color: var(--muted);
}

.generated-version-comparison {
  display: grid;
  gap: 10px;
  padding: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.generated-version-comparison > div {
  display: grid;
  grid-template-columns: repeat(5, minmax(80px, 1fr));
  gap: 8px;
}

.generated-version-comparison article {
  display: grid;
  gap: 4px;
  padding: 10px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.generated-version-comparison span,
.generated-version-comparison small {
  color: var(--muted);
}

.generated-export-manager {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.generated-export-manager p,
.generated-export-manager span {
  margin: 0;
  color: var(--muted);
}

.generated-export-manager a {
  width: max-content;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  color: #ffffff;
  background: var(--brand);
  border-radius: 8px;
  text-decoration: none;
}

.base44-parity-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 14px;
}

.base44-parity-card {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 14px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.base44-parity-card.wide {
  grid-column: 1 / -1;
}

.base44-parity-card p,
.base44-parity-card li,
.base44-status-row span {
  color: var(--muted);
  line-height: 1.45;
}

.base44-parity-card ul,
.base44-parity-card ol {
  margin: 0;
  padding-left: 20px;
}

.base44-status-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(100px, 1fr));
  gap: 10px;
}

.base44-status-row article {
  padding: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.base44-status-row strong {
  display: block;
  font-size: 1.4rem;
}

#campaignList button,
#prospectPipelineList button,
#siteBuildList button,
#createSiteWorkspaceButton,
#generateAppSchemaButton {
  min-height: 34px;
  padding: 0 12px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

.prospect-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 10px;
}

.prospect-form textarea,
.prospect-form button {
  grid-column: 1 / -1;
}

.data-studio-grid {
  display: grid;
  gap: 14px;
}

.data-model-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.data-model-tables {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.data-model-summary article,
.data-model-tables article {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 14px;
  background: #f8faf6;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.data-model-summary span,
.data-model-tables span,
.data-model-summary p,
.data-model-tables p,
.data-model-tables li {
  color: var(--muted);
  line-height: 1.45;
}

.data-model-tables ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.data-model-tables li {
  padding: 4px 7px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 12px;
}

.agent-team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.agent-team-grid article {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 14px;
  background: #f8faf6;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.agent-team-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.agent-team-heading div {
  display: grid;
  gap: 4px;
}

.agent-team-heading span,
.agent-team-grid p,
.agent-team-grid li {
  color: var(--muted);
  line-height: 1.45;
}

.agent-team-grid ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.agent-team-grid li {
  padding: 4px 7px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 12px;
}

.agent-team-grid button {
  min-height: 34px;
  padding: 0 12px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

.integration-marketplace-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.marketplace-browse-controls {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

.marketplace-browse-controls input,
.marketplace-browse-controls select {
  min-width: 0;
}

.integration-marketplace-grid article {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 14px;
  background: #f8faf6;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.integration-marketplace-grid article.connected {
  border-left: 5px solid var(--sage);
}

.integration-marketplace-grid article.setup {
  border-left: 5px solid var(--gold);
}

.integration-marketplace-grid article.planned {
  border-left: 5px solid var(--blue);
}

.integration-marketplace-grid span,
.integration-marketplace-grid p,
.integration-marketplace-grid small {
  color: var(--muted);
  line-height: 1.45;
}

.integration-card-meta,
.integration-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.integration-card-meta em {
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.75rem;
  font-style: normal;
  padding: 3px 8px;
}

.integration-marketplace-grid button {
  justify-self: start;
  min-height: 34px;
  padding: 0 12px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

.go-live-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.go-live-grid article {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 14px;
  background: #f8faf6;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.go-live-grid article.ready {
  border-left: 5px solid var(--sage);
}

.go-live-grid article.blocked {
  border-left: 5px solid var(--gold);
}

.go-live-grid span,
.go-live-grid p {
  color: var(--muted);
  line-height: 1.45;
}

.go-live-grid button {
  justify-self: start;
  min-height: 34px;
  padding: 0 12px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

.client-demo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.client-demo-grid article {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 14px;
  background: #f8faf6;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.client-demo-grid span {
  color: var(--sage);
  font-size: 12px;
  font-weight: 800;
}

.client-demo-grid p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.client-demo-grid button {
  justify-self: start;
  min-height: 34px;
  padding: 0 12px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

.service-coverage {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.service-navigator-controls {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.service-navigator-controls span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

#serviceCategoryGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

#serviceCategoryGrid article {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

.app-workspace-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: 560px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.app-workspace-sidebar {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 18px;
  background: #f8faf6;
  border-right: 1px solid var(--line);
}

.app-workspace-sidebar span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.builder-change-feed,
.builder-suggestions,
.builder-change-box {
  display: grid;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.builder-change-feed article {
  display: grid;
  gap: 4px;
  padding: 10px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.builder-change-feed span,
.builder-change-feed small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.builder-suggestions > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.builder-suggestions button {
  min-height: 30px;
  padding: 0 10px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

.builder-change-box textarea {
  min-height: 98px;
  padding: 12px;
}

.client-command-center {
  display: grid;
  gap: 14px;
  padding: 18px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, #10201b, #244f6d);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(16, 32, 27, 0.18);
}

.client-command-center h3 {
  margin: 0;
  font-size: 24px;
}

.client-command-center p,
.client-command-center .eyebrow {
  color: rgba(255, 255, 255, 0.82);
}

.client-command-center textarea {
  min-height: 118px;
  padding: 14px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 10px;
}

.client-command-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.client-command-examples button {
  min-height: 34px;
  padding: 0 12px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 999px;
  cursor: pointer;
}

.client-command-center .primary-button {
  justify-self: start;
  background: #d7b16d;
  color: #10201b;
}

.client-command-result {
  color: #10201b;
}

.client-command-result-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(7, 18, 24, 0.18);
}

.client-command-result-card p,
.client-command-result-card .eyebrow {
  margin: 0;
  color: #263f38;
}

.client-command-result-card h4 {
  margin: 0;
  font-size: 19px;
}

.client-command-result-card.applied {
  border-color: rgba(37, 114, 84, 0.5);
}

.client-command-links .pill-row {
  margin-top: 8px;
}

.client-command-links a {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  color: #123f63;
  background: #eef6fb;
  border: 1px solid #c6dce9;
  border-radius: 999px;
  text-decoration: none;
}

.client-command-activity ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

.app-workspace-tabs {
  display: grid;
  gap: 4px;
  margin-top: 10px;
}

.app-workspace-tabs button,
.workspace-mode-buttons button,
.workspace-preview-actions button,
.workspace-preview-actions a {
  min-height: 34px;
  padding: 0 12px;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
}

.app-workspace-tabs button.active,
.app-workspace-tabs button:hover,
.workspace-mode-buttons button.active,
.workspace-preview-actions button:hover {
  background: #eef2ea;
  border-color: var(--line);
}

.app-workspace-main {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
}

.app-workspace-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  border-bottom: 1px solid var(--line);
}

.workspace-mode-buttons,
.workspace-preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#appWorkspacePanel {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 18px;
}

.workspace-preview-frame,
.workspace-section-detail,
.builder-change-list article {
  display: grid;
  gap: 14px;
  padding: 18px;
  background: #fbfcf8;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.workspace-preview-hero {
  display: grid;
  gap: 10px;
  min-height: 210px;
  align-content: center;
  padding: 26px;
  color: #ffffff;
  background: #08111c;
  border-radius: 8px;
}

.workspace-preview-hero .eyebrow,
.workspace-preview-hero p {
  color: #dce7f2;
}

.workspace-preview-hero h3 {
  margin: 0;
  font-size: 28px;
}

.workspace-preview-actions button {
  color: #ffffff;
  background: #1d3550;
  border-color: #314c69;
}

.workspace-preview-actions a {
  color: #ffffff;
  background: #2f5f84;
  border-color: #314c69;
}

.real-app-preview {
  width: 100%;
  min-height: 520px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.generated-code-workbench {
  gap: 12px;
}

.generated-file-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.generated-file-buttons button {
  min-height: 32px;
  padding: 0 10px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

.generated-file-buttons button.active {
  color: #ffffff;
  background: var(--blue);
  border-color: var(--blue);
}

#generatedFileEditor {
  width: 100%;
  min-height: 360px;
  padding: 14px;
  color: #17231d;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: Consolas, "Courier New", monospace;
  font-size: 13px;
  line-height: 1.45;
  resize: vertical;
}

.generated-ai-edit-box,
.generated-page-box,
.generated-entity-box,
.generated-entity-list,
.generated-workflow-box,
.generated-workflow-list {
  display: grid;
  gap: 8px;
  padding: 12px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.generated-ai-edit-box textarea,
.generated-page-box textarea,
.generated-page-box input,
.generated-entity-box textarea,
.generated-entity-box input,
.generated-workflow-box textarea,
.generated-workflow-box input {
  min-height: 82px;
  padding: 12px;
}

.generated-page-box input,
.generated-entity-box input,
.generated-workflow-box input {
  min-height: 42px;
}

.generated-ai-edit-box button,
.generated-page-box button,
.generated-entity-box button,
.generated-workflow-box button {
  justify-self: start;
  min-height: 36px;
  padding: 0 14px;
  color: #ffffff;
  background: var(--blue);
  border: 1px solid var(--blue);
  border-radius: 8px;
  cursor: pointer;
}

.generated-entity-list article,
.generated-workflow-list article {
  display: grid;
  gap: 4px;
  padding: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.generated-entity-list span,
.generated-workflow-list span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.workspace-preview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.workspace-preview-grid article {
  display: grid;
  gap: 7px;
  padding: 14px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.workspace-preview-grid span {
  color: var(--sage);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.workspace-preview-grid p,
.workspace-section-detail li {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.workspace-section-detail ul {
  margin: 0;
  padding-left: 18px;
}

.builder-change-list {
  display: grid;
  gap: 10px;
}

.builder-change-list p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.builder-change-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.builder-change-meta section {
  padding: 12px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.builder-change-list button {
  min-height: 34px;
  padding: 0 12px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

#serviceCategoryGrid article > div {
  display: grid;
  gap: 5px;
}

#serviceCategoryGrid article span,
#serviceCategoryGrid article small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

#serviceCategoryGrid ul {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.45;
}

#serviceCategoryGrid li + li {
  margin-top: 4px;
}

#serviceCategoryGrid button {
  justify-self: start;
  min-height: 34px;
  padding: 0 12px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

#serviceCategoryGrid button:hover {
  border-color: var(--blue);
}

.settings-card {
  display: grid;
  gap: 16px;
  align-content: start;
  padding: 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.settings-card.wide {
  grid-column: 1 / -1;
}

.security-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.75fr) minmax(420px, 1fr);
  gap: 18px;
}

.security-card {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.security-card.wide {
  grid-column: 1 / -1;
}

.security-requirements,
#teamUserList,
.access-model-grid,
.auth-go-live-grid {
  display: grid;
  gap: 10px;
}

.security-requirements article,
#teamUserList article,
.access-model-grid article,
.auth-go-live-grid article {
  display: grid;
  gap: 6px;
  padding: 14px;
  background: #f8faf6;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.auth-go-live-grid article.ready {
  border-left: 5px solid var(--sage);
}

.auth-go-live-grid article.partial {
  border-left: 5px solid var(--blue);
}

.auth-go-live-grid article.blocked {
  border-left: 5px solid var(--gold);
}

.workspace-security-dashboard article.resolved {
  border-left: 5px solid var(--sage);
  opacity: 0.78;
}

.security-requirements span,
#teamUserList span,
#teamUserList small,
.access-model-grid span,
.access-model-grid p,
.auth-go-live-grid p,
.auth-go-live-grid small {
  color: var(--muted);
  line-height: 1.45;
}

.auth-go-live-grid span {
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.auth-go-live-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.billing-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.stripe-live-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.8fr) minmax(360px, 1.2fr) minmax(280px, 0.8fr);
  gap: 12px;
  margin-bottom: 18px;
}

.stripe-live-card {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.stripe-live-card.ready {
  border-left: 5px solid var(--sage);
}

.stripe-live-card.blocked {
  border-left: 5px solid var(--gold);
}

.stripe-live-card p,
.stripe-live-card span {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.stripe-live-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.stripe-live-stats article,
.stripe-requirement-list article {
  display: grid;
  gap: 5px;
  padding: 10px;
  background: #f8faf6;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.stripe-requirement-list {
  display: grid;
  gap: 8px;
}

.stripe-requirement-list code {
  color: var(--blue);
  font-size: 12px;
  white-space: normal;
  word-break: break-word;
}

.stripe-live-actions,
.billing-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.stripe-live-actions button,
.billing-actions button {
  min-height: 34px;
  padding: 0 12px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

.billing-summary article,
.billing-list article {
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.billing-summary span,
.billing-list span,
.billing-list small {
  display: block;
  color: var(--muted);
}

.billing-summary strong {
  display: block;
  margin-top: 6px;
  font-size: 24px;
}

.billing-list {
  display: grid;
  gap: 10px;
}

.billing-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.settings-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.settings-actions button {
  min-height: 34px;
  padding: 0 12px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

.backup-list {
  display: grid;
  gap: 8px;
}

.backup-list article {
  display: grid;
  gap: 4px;
  padding: 12px;
  background: #f8faf6;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.backup-list span {
  color: var(--muted);
  font-size: 12px;
  word-break: break-word;
}

.audit-list {
  display: grid;
  gap: 10px;
}

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

.readiness-list article,
.launch-card,
.launch-card article {
  display: grid;
  gap: 8px;
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.readiness-list article.ready,
.launch-card article.ready {
  border-left: 5px solid var(--sage);
}

.readiness-list article.blocked,
.launch-card article.blocked {
  border-left: 5px solid var(--gold);
}

.readiness-list article.partial,
.launch-card article.partial {
  border-left: 5px solid var(--blue);
}

.readiness-list span,
.launch-card span {
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.readiness-list p,
.launch-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

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

.setup-wizard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.setup-card {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.setup-card.wide {
  grid-column: 1 / -1;
}

#setupServiceList,
#setupControlList {
  display: grid;
  gap: 10px;
}

#setupServiceList article,
#setupControlList article {
  display: grid;
  gap: 8px;
  padding: 14px;
  background: #f8faf6;
  border: 1px solid var(--line);
  border-radius: 8px;
}

#setupServiceList article.ready,
#setupControlList article.ready {
  border-left: 5px solid var(--sage);
}

#setupServiceList article.missing,
#setupControlList article.missing,
#setupServiceList article.disabled,
#setupControlList article.disabled {
  border-left: 5px solid var(--gold);
}

#setupServiceList span,
#setupControlList span {
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

#setupServiceList p,
#setupControlList p,
#setupNextDetail {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.setup-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.setup-actions button,
#setupServiceList button,
#setupControlList button {
  justify-self: start;
  min-height: 34px;
  padding: 0 12px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

#setupCommandPreview {
  min-height: 120px;
  padding: 14px;
  white-space: pre-wrap;
  background: #f8faf6;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.api-center-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.api-card {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

#apiNextRequests,
#apiRequirementList,
#aiProviderRouter {
  display: grid;
  gap: 10px;
}

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

#apiRequirementList {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#apiNextRequests article,
#apiRequirementList article,
#aiProviderRouter article,
.ownership-grid article {
  display: grid;
  gap: 8px;
  padding: 14px;
  background: #f8faf6;
  border: 1px solid var(--line);
  border-radius: 8px;
}

#apiNextRequests article.ready,
#apiRequirementList article.ready,
#aiProviderRouter article.ready {
  border-left: 5px solid var(--sage);
}

#apiNextRequests article.missing,
#apiRequirementList article.missing,
#aiProviderRouter article.missing {
  border-left: 5px solid var(--gold);
}

#apiNextRequests article.optional,
#apiRequirementList article.optional {
  border-left: 5px solid var(--blue);
}

.api-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.api-heading div,
#apiNextRequests article div {
  display: grid;
  gap: 4px;
}

.api-heading span,
#apiNextRequests span,
.api-heading em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
}

#apiRequirementList p,
#apiNextRequests p,
#aiProviderRouter p,
.ownership-grid p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.helper-copy {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

#apiRequirementList small,
#apiNextRequests small,
#aiProviderRouter small {
  color: var(--muted);
  line-height: 1.45;
}

.customer-connection-form {
  display: grid;
  gap: 10px;
}

.customer-connection-form textarea {
  min-height: 150px;
}

#apiSetupTemplate,
#apiRequirementList pre {
  white-space: pre-wrap;
  margin: 0;
  padding: 14px;
  background: #0f1916;
  color: #f8faf6;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.6;
}

#apiRequirementList details {
  display: grid;
  gap: 8px;
}

#apiRequirementList summary {
  cursor: pointer;
  color: var(--blue);
  font-weight: 800;
}

.product-map-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.product-map-card {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.product-map-card.wide {
  grid-column: 1 / -1;
}

#productModelList {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

#productModelList article {
  display: grid;
  gap: 8px;
  padding: 14px;
  background: #f8faf6;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.product-map-card p,
.product-map-card li {
  color: var(--muted);
  line-height: 1.5;
}

.builder-console-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(360px, 1fr);
  gap: 18px;
}

.builder-console-card {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.builder-console-card.wide {
  grid-column: 1 / -1;
}

.system-layers {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.system-layers article,
.power-stack-grid article,
.builder-status-grid article {
  display: grid;
  gap: 7px;
  padding: 14px;
  background: #f8faf6;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.system-layers span,
.power-stack-grid span,
.builder-status-grid span,
.builder-status-grid small,
.builder-action-list span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.power-stack-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.power-stack-grid article > div {
  display: grid;
  gap: 4px;
}

.power-stack-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.builder-action-list {
  display: grid;
  gap: 10px;
}

.builder-action-list button {
  display: grid;
  gap: 5px;
  width: 100%;
  min-height: 68px;
  padding: 13px 14px;
  color: var(--ink);
  text-align: left;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

.builder-action-list button:hover {
  border-color: var(--blue);
  box-shadow: 0 8px 24px rgba(47, 95, 132, 0.12);
}

.builder-action-list button:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

.builder-answer {
  min-height: 180px;
  padding: 14px;
  background: #f8faf6;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.builder-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.builder-status-grid strong {
  font-size: 22px;
}

.product-map-card p {
  margin: 0;
}

.product-map-card ol {
  margin: 0;
  padding-left: 22px;
}

.launch-card {
  align-content: start;
  box-shadow: var(--shadow);
}

.launch-card.wide {
  grid-column: 1 / -1;
}

#launchPackageList,
#launchGateList,
#launchDocumentList,
#launchConfigList,
#liveLaunchActions,
#deploymentFiles,
.preflight-next,
.production-go-live-grid {
  display: grid;
  gap: 10px;
}

.live-launch-grid,
.preflight-grid,
.deployment-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.live-launch-grid article,
#liveLaunchActions article,
.preflight-grid article,
.preflight-next section,
.deployment-grid article,
#deploymentFiles article,
.production-go-live-grid article {
  display: grid;
  gap: 8px;
  padding: 14px;
  background: #f8faf6;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.live-launch-grid article.ready {
  border-left: 5px solid var(--sage);
}

.preflight-grid article.pass,
.status-pill.production_candidate {
  border-left: 5px solid var(--sage);
}

.preflight-grid article.manual_review,
.status-pill.paid_pilot_candidate,
.status-pill.demo_ready_only {
  border-left: 5px solid var(--blue);
}

.preflight-grid article.fail,
.status-pill.not_ready {
  border-left: 5px solid var(--gold);
}

.live-launch-grid article.partial,
.production-go-live-grid article.partial {
  border-left: 5px solid var(--blue);
}

.live-launch-grid article.blocked,
.production-go-live-grid article.blocked {
  border-left: 5px solid var(--gold);
}

.production-go-live-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.production-go-live-grid article.ready {
  border-left: 5px solid var(--sage);
}

.production-go-live-grid span,
.preflight-grid span,
.preflight-grid p,
.preflight-next,
.production-go-live-grid p,
.production-go-live-grid small {
  color: var(--muted);
  line-height: 1.45;
}

.preflight-next {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 10px;
}

.preflight-next ol {
  margin: 8px 0 0;
  padding-left: 20px;
}

.deployment-grid {
  margin-top: 14px;
}

.deployment-grid article.ready,
#deploymentFiles article.ready {
  border-left: 5px solid var(--sage);
}

.deployment-grid article.missing,
#deploymentFiles article.missing {
  border-left: 5px solid var(--gold);
}

.deployment-grid article.disabled,
#deploymentFiles article.disabled {
  border-left: 5px solid var(--blue);
}

.deployment-grid ol {
  margin: 0;
  padding-left: 20px;
}

#deploymentCommands {
  white-space: pre-wrap;
  margin: 14px 0;
  padding: 14px;
  background: #0f1916;
  color: #f8faf6;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.6;
}

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

.bridge-list article {
  display: grid;
  gap: 8px;
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.bridge-list span {
  color: var(--sage);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.bridge-list p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.workspace-browser {
  display: grid;
  grid-template-columns: minmax(320px, 0.85fr) minmax(420px, 1fr);
  gap: 18px;
  margin-top: 18px;
}

.desktop-action-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.85fr) minmax(420px, 1fr);
  gap: 18px;
  margin-top: 18px;
}

.workspace-card {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.workspace-path-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.workspace-path-row span {
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#workspaceFileList {
  display: grid;
  gap: 8px;
  max-height: 420px;
  overflow: auto;
}

#workspaceFileList button {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 11px 12px;
  color: var(--ink);
  text-align: left;
  background: #f8faf6;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

#workspaceFileList button:hover {
  border-color: var(--blue);
}

#workspaceFileList span {
  color: var(--muted);
  font-size: 12px;
}

#workspacePreview {
  min-height: 420px;
  max-height: 520px;
  overflow: auto;
  padding: 14px;
  white-space: pre-wrap;
  word-break: break-word;
  background: #f8faf6;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.desktop-action-buttons,
#desktopActionList {
  display: grid;
  gap: 10px;
}

.desktop-action-buttons button {
  display: grid;
  gap: 5px;
  width: 100%;
  min-height: 64px;
  padding: 13px 14px;
  color: var(--ink);
  text-align: left;
  background: #f8faf6;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

.desktop-action-buttons button:hover {
  border-color: var(--blue);
}

.desktop-action-buttons span,
#desktopActionList span,
#desktopActionList small {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

#desktopActionList article {
  display: grid;
  gap: 8px;
  padding: 14px;
  background: #f8faf6;
  border: 1px solid var(--line);
  border-radius: 8px;
}

#desktopActionList p {
  margin: 0;
  color: var(--muted);
  word-break: break-word;
}

.automation-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.75fr) minmax(420px, 1fr);
  gap: 18px;
}

.automation-card {
  display: grid;
  gap: 16px;
  align-content: start;
  padding: 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

#browserTaskList {
  display: grid;
  gap: 10px;
}

#browserTaskList article {
  display: grid;
  gap: 8px;
  padding: 13px;
  background: #f8faf6;
  border: 1px solid var(--line);
  border-radius: 8px;
}

#browserTaskList p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

#browserTaskList span,
#browserTaskList small {
  color: var(--muted);
}

#browserTaskList button {
  justify-self: start;
  min-height: 34px;
  padding: 0 12px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

.automation-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.audit-list article {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.audit-list span,
.audit-list small {
  color: var(--muted);
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
}

.checkbox-row input {
  width: auto;
}

.preview-card strong {
  font-size: 28px;
}

.preview-card span,
.preview-card small {
  color: var(--muted);
}

.agency-card {
  display: grid;
  gap: 16px;
  align-content: start;
  padding: 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.agency-card.wide {
  margin-top: 18px;
}

#pilotLaunchList {
  display: grid;
  gap: 10px;
}

#pilotLaunchList article {
  display: grid;
  gap: 8px;
  padding: 14px;
  background: #f8faf6;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.pilot-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

#pilotLaunchList span,
#pilotLaunchList p,
#pilotLaunchList li {
  color: var(--muted);
  line-height: 1.45;
}

#pilotLaunchList ul {
  margin: 0;
  padding-left: 18px;
}

#pilotLaunchList button {
  min-height: 34px;
  padding: 0 12px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

.project-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.project-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.8fr) minmax(420px, 1fr);
  gap: 18px;
}

.project-grid {
  display: grid;
  gap: 12px;
}

.project-grid article {
  display: grid;
  gap: 10px;
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.project-grid span {
  color: var(--muted);
  font-size: 12px;
  word-break: break-word;
}

.project-grid ul {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.5;
}

.file-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.file-buttons button {
  min-height: 32px;
  padding: 0 10px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

.project-preview {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.project-preview pre {
  max-height: 560px;
  overflow: auto;
  margin: 0;
  padding: 14px;
  color: #233229;
  background: #f5f6f1;
  border: 1px solid var(--line);
  border-radius: 8px;
  white-space: pre-wrap;
}

.message-card {
  display: grid;
  gap: 16px;
  align-content: start;
  padding: 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.message-card.wide {
  grid-column: 1 / -1;
}

.ops-list.wide {
  grid-column: 1 / -1;
}

.finance-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.75fr) minmax(360px, 1fr);
  gap: 18px;
}

.finance-card.wide {
  grid-column: 1 / -1;
}

#leadList,
#jobBoard,
#estimateList,
#invoiceList,
#messageList,
#deliveryList {
  display: grid;
  gap: 10px;
}

#clientList {
  display: grid;
  gap: 10px;
}

#workflowList {
  display: grid;
  gap: 10px;
}

#leadList article,
#jobBoard article,
#estimateList article,
#invoiceList article,
#messageList article,
#deliveryList article {
  display: grid;
  gap: 6px;
  padding: 13px;
  background: #f8faf6;
  border: 1px solid var(--line);
  border-radius: 8px;
}

#clientList article {
  display: grid;
  gap: 8px;
  padding: 13px;
  background: #f8faf6;
  border: 1px solid var(--line);
  border-radius: 8px;
}

#workflowList article {
  display: grid;
  gap: 8px;
  padding: 13px;
  background: #f8faf6;
  border: 1px solid var(--line);
  border-radius: 8px;
}

#workflowList button {
  justify-self: start;
  min-height: 34px;
  padding: 0 12px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

#clientList ul {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.5;
}

#clientList li {
  margin-bottom: 6px;
}

#clientList li button {
  margin-left: 8px;
  min-height: 26px;
  padding: 0 8px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

#clientList progress {
  width: 100%;
}

#jobBoard article {
  grid-template-columns: minmax(0, 1fr) 190px;
  align-items: center;
}

#estimateList article {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

#estimateList button {
  min-height: 34px;
  padding: 0 12px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

#messageList article,
#deliveryList article {
  align-content: start;
}

#messageList p,
#deliveryList p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

#messageList button {
  justify-self: start;
  min-height: 34px;
  padding: 0 12px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

@media (max-width: 1020px) {
  .pilot-mode-card,
  .pilot-first-run-checklist ol {
    grid-template-columns: 1fr;
  }
}

#leadList span,
#jobBoard span,
#estimateList span,
#invoiceList span,
#messageList span,
#clientList span,
#workflowList span,
#leadList small,
#jobBoard small,
#invoiceList small,
#clientList small,
#workflowList small,
.helper-text {
  color: var(--muted);
  font-size: 12px;
}

.helper-text {
  min-height: 18px;
  font-weight: 700;
}

.field-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

@media (max-width: 1020px) {
  .operations-grid,
  .finance-grid,
  .messaging-grid,
  .agency-grid,
  .workflow-grid,
  .marketing-grid,
  .campaign-assets,
  .prospect-form,
  .site-builder-grid,
  .site-build-assets,
  .generated-site-preview,
  .publish-center-grid,
  .data-model-summary,
  .data-model-tables,
  .agent-team-grid,
  .integration-marketplace-grid,
  .marketplace-browse-controls,
  .go-live-grid,
  .client-demo-grid,
  .app-workspace-shell,
  .workspace-preview-grid,
  .builder-change-meta,
  .consent-grid,
  .settings-grid,
  .security-grid,
  .access-model-grid,
  .auth-go-live-grid,
  .support-ops-grid,
  .connector-builder,
  .stripe-live-grid,
  .stripe-live-stats,
  .billing-summary,
  .billing-list article,
  .readiness-list,
  .launch-grid,
  .live-launch-grid,
  .preflight-grid,
  .preflight-next,
  .deployment-grid,
  .production-go-live-grid,
  .ownership-grid,
  #apiRequirementList,
  .setup-wizard-grid,
  .service-navigator-controls,
  #serviceCategoryGrid,
  .product-map-grid,
  .builder-console-grid,
  .system-layers,
  .power-stack-grid,
  .market-proof-grid,
  .builder-status-grid,
  .generated-ops-metrics,
  .generated-business-snapshot > div,
  .generated-version-comparison > div,
  .base44-dashboard-grid,
  .workspace-search-results article,
  .workspace-invite-panel,
  .workspace-publish-builder,
  .workspace-user-panel,
  .workspace-user-form,
  .workspace-user-filters,
  .workspace-data-builder,
  .workspace-analytics-builder,
  .workspace-growth-builder,
  .workspace-code-builder,
  .workspace-automation-builder,
  .workspace-integration-builder,
  .latest-app-launch-strip,
  .base44-parity-grid,
  .base44-status-row,
  .workspace-browser,
  .desktop-action-grid,
  #productModelList,
  .bridge-list,
  .automation-grid,
  .project-layout,
#jobBoard article {
    grid-template-columns: 1fr;
  }

  .ops-list.wide,
  .finance-card.wide,
  .message-card.wide,
  .marketing-card.wide,
  .site-builder-card.wide,
  .launch-card.wide,
  .security-card.wide,
  .setup-card.wide,
  .api-card.wide,
  .product-map-card.wide,
  .builder-console-card.wide {
    grid-column: auto;
  }
}

.workspace-analytics-chart {
  display: grid;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.traffic-chart {
  display: grid;
  grid-template-columns: repeat(7, minmax(24px, 1fr));
  align-items: end;
  gap: 10px;
  min-height: 120px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, #fff, var(--soft));
}

.traffic-chart span {
  display: block;
  min-height: 12px;
  border-radius: 6px 6px 0 0;
  background: var(--blue);
}