/*
 * Protected workspace rules moved from saas.html.
 * Keep this section before the existing SaaS stylesheet
 * to preserve the previous cascade while allowing strict CSP.
 */
.saas-main { align-content: start; }
.saas-hero {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 28px;
  color: #fff;
  background:
    radial-gradient(circle at 90% 0, rgba(18,183,106,.34), transparent 31%),
    linear-gradient(120deg, #101828, #1849a9);
}
.saas-hero h2 { margin: 8px 0; font-size: clamp(30px, 4vw, 48px); }
.saas-hero p { max-width: 850px; color: #dbeafe; line-height: 1.55; }
.credential-panel {
  display: grid;
  grid-template-columns: minmax(180px, .7fr) minmax(260px, 1.3fr) auto;
  gap: 10px;
  align-items: end;
  margin-top: 20px;
  padding: 14px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 8px;
}
.credential-panel label { display: grid; gap: 6px; font-size: 12px; font-weight: 800; }
.credential-panel input {
  width: 100%;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.96);
  color: #101828;
  border-radius: 8px;
  padding: 10px 12px;
}
.credential-note { margin: 9px 0 0; font-size: 12px; color: #bfdbfe; }
.saas-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.saas-card { padding: 16px; }
.saas-card strong { display: block; font-size: 24px; margin-top: 8px; }
.saas-card small { color: var(--muted); line-height: 1.45; }
.saas-section { padding: 18px; }
.saas-section h2 { margin: 0 0 6px; }
.saas-section > p { color: var(--muted); margin-top: 0; }
.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.plan { border: 1px solid var(--line); border-radius: 8px; padding: 16px; background: #fff; }
.plan.current { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(21,94,239,.12); }
.plan h3 { margin: 0; }
.plan ul { padding-left: 18px; color: var(--muted); line-height: 1.55; }
.step-list, .support-list, .usage-list { display: grid; gap: 9px; }
.step, .support-row, .usage-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(90px, auto);
  gap: 10px;
  align-items: center;
}
.step p, .support-row p, .usage-row p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.state { justify-self: end; border-radius: 999px; padding: 5px 9px; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.state.completed, .state.active, .state.available { background: #ecfdf3; color: var(--green); }
.state.warning, .state.grace, .state.in_progress { background: #fffaeb; color: var(--amber); }
.state.blocked, .state.suspended, .state.exhausted { background: #fef3f2; color: var(--red); }
.state.pending, .state.unknown { background: #f2f4f7; color: #475467; }
.boundary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.boundary { border-left: 4px solid var(--brand); background: var(--panel-2); padding: 12px; border-radius: 6px; }
.boundary strong { display: block; }
.boundary span { color: var(--muted); font-size: 13px; }
.identity-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: 12px;
  margin-top: 20px;
}
.identity-card,
.compatibility-panel {
  padding: 16px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 8px;
}
.identity-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}
.identity-heading h3 {
  margin: 0 0 5px;
  font-size: 18px;
}
.identity-heading p {
  margin: 0;
  color: #bfdbfe;
  font-size: 13px;
}
.browser-login-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.credential-panel select {
  width: 100%;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.96);
  color: #101828;
  border-radius: 8px;
  padding: 10px 12px;
}
.session-panel {
  margin-top: 14px;
  display: grid;
  gap: 12px;
}
.session-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.session-grid div {
  padding: 10px;
  border-radius: 7px;
  background: rgba(16,24,40,.35);
}
.session-grid small {
  display: block;
  color: #bfdbfe;
  margin-bottom: 3px;
}
.session-actions {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto;
  gap: 8px;
  align-items: end;
}
.session-actions label {
  display: grid;
  gap: 5px;
  font-size: 12px;
  font-weight: 800;
}
.session-actions input {
  width: 100%;
  border: 1px solid rgba(255,255,255,.35);
  background: #fff;
  color: #101828;
  border-radius: 8px;
  padding: 10px 12px;
}
.compatibility-panel summary {
  cursor: pointer;
  font-weight: 900;
}
.compatibility-panel > p {
  color: #bfdbfe;
  font-size: 13px;
  line-height: 1.5;
}
.secondary-button {
  background: #475467;
}
.connector-form {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(300px, 1.2fr) auto;
  gap: 12px;
  align-items: end;
}
.connector-form > label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
}
.connector-form select {
  width: 100%;
  border: 1px solid var(--line);
  background: #fff;
  color: #101828;
  border-radius: 8px;
  padding: 10px 12px;
}
.connector-review {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: 8px !important;
  line-height: 1.45;
}
.connector-review input {
  margin: 2px 0 0;
}
.connector-guidance {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.connector-guidance > p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
.connector-guidance-row {
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
}
.connector-guidance-row strong {
  display: block;
  font-size: 13px;
}
.connector-guidance-row span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.scope-panel {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
}
.scope-form {
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(320px, 1.2fr) auto;
  gap: 12px;
  align-items: start;
}
.scope-form > label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
}
.scope-form select {
  width: 100%;
  border: 1px solid var(--line);
  background: #fff;
  color: #101828;
  border-radius: 8px;
  padding: 10px 12px;
}
.scope-services {
  display: grid;
  gap: 7px;
}
.scope-services > p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
.scope-service {
  display: grid;
  grid-template-columns: auto minmax(160px, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  cursor: pointer;
}
.scope-service input {
  margin: 0;
}
.scope-service span:not(.state) {
  display: grid;
  gap: 3px;
}
.scope-service small {
  color: var(--muted);
  font-size: 12px;
}
.scope-readiness {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.scope-readiness > p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
.scope-readiness-row {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
}
.scope-readiness-row p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.scope-status {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
[hidden] {
  display: none !important;
}
#connectionStatus { margin-top: 12px; font-weight: 800; }
@media (max-width: 1050px) {
  .saas-grid, .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  body { display: block; }
  .side { min-height: auto; position: static; }
  .identity-grid, .credential-panel, .browser-login-form, .session-grid, .session-actions, .saas-grid, .plan-grid, .boundary-grid, .connector-form, .scope-form { grid-template-columns: 1fr; }
  .state { justify-self: start; }
}

:root {
  --bg: #f7f7f4;
  --surface: #ffffff;
  --ink: #111312;
  --muted: #60645f;
  --line: #e4e6e1;
  --blue: #2563eb;
  --teal: #0ea5a8;
  --dark: #111b19;
  --green: #178252;
  --amber: #a15c00;
  --red: #c53b36;
  --radius: 22px;
  --max: 1240px;
  --app-shadow: 0 22px 70px rgba(16, 31, 27, 0.08);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.protected-app {
  display: block;
  min-width: 0;
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

.protected-app button,
.protected-app input,
.protected-app select,
.protected-app textarea { font: inherit; }

.protected-app button { cursor: pointer; }

.protected-app a { color: inherit; }

.protected-app h1,
.protected-app h2,
.protected-app h3,
.protected-app h4 { color: var(--ink); letter-spacing: -0.035em; line-height: 1.1; }

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 999;
  transform: translateY(-160%);
  padding: 10px 16px;
  border-radius: 9px;
  background: var(--ink);
  color: #fff !important;
}

.skip-link:focus { transform: none; }

.app-header {
  display: flex;
  min-height: 78px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 10px max(24px, calc((100vw - var(--max)) / 2));
  border-bottom: 1px solid var(--line);
  background: rgba(247, 247, 244, 0.96);
}

.app-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  letter-spacing: 0.1em;
}

.app-wordmark img {
  display: block;
  width: 52px;
  height: 52px;
  object-fit: contain;
  mix-blend-mode: normal;
  transform-origin: 50% 50%;
}

@keyframes zovelty-logo-roll {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (hover: hover) and (pointer: fine) {
  .app-wordmark:hover img,
  .app-wordmark:focus-visible img {
    animation: zovelty-logo-roll .78s cubic-bezier(.22, .61, .36, 1) 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-wordmark:hover img,
  .app-wordmark:focus-visible img { animation: none; }
}

.app-header-state { display: flex; align-items: center; gap: 14px; }
.app-menu-toggle, .mobile-nav-status, .mobile-nav-separator, .mobile-sign-out { display: none; }

.environment-badge,
.access-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 750;
}

.environment-badge { padding: 7px 11px; border: 1px solid var(--line); background: var(--surface); }
.access-label { color: var(--muted); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(14,165,168,.1); }

.app-nav { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--line); background: rgba(247,247,244,.94); backdrop-filter: blur(16px); }
.protected-app:not(.is-authenticated) .app-nav { display: none; }
.protected-app.is-authenticated .saas-hero { display: none; }
.protected-app:not(.is-authenticated) #account-setup,
.protected-app:not(.is-authenticated) #plans,
.protected-app:not(.is-authenticated) #onboarding,
.protected-app:not(.is-authenticated) #usage,
.protected-app:not(.is-authenticated) #support,
.protected-app:not(.is-authenticated) #implementation { display: none; }
.account-identity-mount { margin-top: 24px; }
.app-nav-inner { display: flex; width: min(calc(100% - 48px), var(--max)); margin-inline: auto; gap: 5px; overflow-x: auto; padding: 9px 0; scrollbar-width: none; scroll-snap-type: x proximity; }
.app-nav-inner::-webkit-scrollbar { display: none; }
.app-nav a { flex: 0 0 auto; min-height: 44px; display: inline-flex; align-items: center; padding: 9px 12px; border-radius: 9px; text-decoration: none; font-size: .86rem; font-weight: 680; scroll-snap-align: start; }
.app-nav a:hover, .app-nav a:focus-visible { background: var(--surface); }
.app-nav a.is-current { background: var(--surface); color: var(--blue); }
.app-nav .account-nav-link { margin-left: auto; border: 1px solid var(--line); background: var(--surface); }

.saas-main { display: grid; width: min(calc(100% - 48px), var(--max)); margin: 0 auto; padding: 70px 0 100px; gap: 22px; }
.product-workspace { display: grid; gap: 22px; }
.command-center { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; padding: 12px 0 56px; border-bottom: 1px solid var(--line); scroll-margin-top: 78px; }
.product-hero-copy { max-width: 820px; }
.product-hero-copy h1 { margin: 0 0 20px; font-size: clamp(3.1rem, 6.8vw, 5.35rem); }
.product-hero-copy > p:last-child { max-width: 720px; color: var(--muted); font-size: 1.1rem; }
.product-session { display: flex; align-self: start; align-items: center; gap: 10px; padding: 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.product-session span { display: grid; padding: 0 9px; }
.product-session small, .engine-status-strip small, .evidence-panel small { color: var(--muted); font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.product-session strong { max-width: 180px; overflow: hidden; text-overflow: ellipsis; font-size: .76rem; white-space: nowrap; }
.product-session button { min-height: 38px; padding: 0 15px; border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--surface); font-weight: 720; }
.ask-workspace { grid-column: 1 / -1; position: relative; padding: 26px; border: 1px solid var(--line); border-radius: 28px; background: var(--surface); box-shadow: var(--app-shadow); }
.ask-workspace > label { display: block; margin-bottom: 16px; font-weight: 760; }
.ask-intro { max-width: 760px; margin: -6px 0 16px; color: var(--muted); font-size: .86rem; }
.ask-row { display: grid; grid-template-columns: minmax(0, 1fr) 62px; gap: 10px; }
.ask-row input { width: 100%; min-width: 0; padding: 17px; border: 1px solid var(--line); border-radius: 14px; outline: none; background: var(--bg); color: var(--ink); }
.ask-row input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.ask-row button { border: 0; border-radius: 14px; background: var(--ink); color: var(--surface); font-weight: 750; }
.query-suggestions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.query-suggestions button, .graph-lenses button { padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: .72rem; }
.query-suggestions button:hover, .query-suggestions button:focus-visible, .graph-lenses button:hover, .graph-lenses button:focus-visible, .graph-lenses button.is-active { border-color: var(--blue); color: var(--blue); }
.ask-boundary { margin: 18px 0 0; color: var(--muted); font-size: .74rem; }
.operational-answer { grid-column: 1 / -1; padding: 24px; border-left: 3px solid var(--blue); border-radius: 0 var(--radius) var(--radius) 0; background: var(--surface); }
.operational-answer h2 { margin: 0 0 12px; font-size: 1.45rem; }
.operational-answer dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; overflow: hidden; margin: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--line); }
.operational-answer dl div { padding: 14px; background: var(--surface); }
.operational-answer dt { color: var(--muted); font-size: .68rem; font-weight: 750; text-transform: uppercase; }
.operational-answer dd { margin: 4px 0 0; overflow-wrap: anywhere; font-size: .82rem; }
.engine-status-strip { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--line); }
.engine-status-strip span, .evidence-panel span { display: grid; min-width: 0; gap: 5px; padding: 14px; background: var(--surface); }
.engine-status-strip strong, .evidence-panel strong { overflow-wrap: anywhere; font-size: .82rem; }

.product-section, .split-product-section { padding: clamp(28px, 5vw, 54px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); scroll-margin-top: 78px; }
.product-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 28px; }
.product-section-heading h2, .split-product-section h2, .domain-grid h2 { margin: 0; font-size: clamp(1.9rem, 3.5vw, 3rem); }
.product-section-heading > p, .split-product-section > div > p:last-child, .domain-grid article > p:last-child { max-width: 520px; margin: 0; color: var(--muted); }
.split-product-section { display: grid; grid-template-columns: .7fr 1.3fr; gap: 36px; }
.graph-workspace { padding: 0; overflow: hidden; }
.graph-workspace .product-section-heading { padding: 34px 34px 0; }
.graph-lenses { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 5px; }
.graph-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; min-height: 480px; border-top: 1px solid var(--line); }
.graph-canvas { position: relative; min-width: 0; overflow: auto; background: var(--bg); }
.graph-canvas svg { display: block; min-width: 720px; width: 100%; height: 480px; }
.empty-graph-grid { opacity: .48; }
.empty-graph-grid line { stroke: var(--line); stroke-width: 1; }
.graph-empty-content { position: absolute; inset: 0; z-index: 1; display: grid; min-width: 0; place-content: center; justify-items: center; padding: 34px; text-align: center; }
.graph-empty-content::before { content: ""; position: absolute; inset: 18% 15%; z-index: -1; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.graph-empty-content h3 { width: min(760px, 70%); max-width: 100%; margin: 0 auto; font-size: clamp(1.55rem, 2.7vw, 2.35rem); line-height: 1.08; overflow-wrap: break-word; text-align: center; text-wrap: balance; }
.graph-empty-content > p:not(.eyebrow) { max-width: 590px; margin: 14px auto 0; color: var(--muted); }
.graph-empty-readiness { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px; }
.graph-empty-readiness span { padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--muted); font-size: .7rem; font-weight: 700; }
.graph-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px; }
.graph-empty-action { padding: 10px 16px; border-radius: 999px; background: var(--ink); color: var(--surface) !important; text-decoration: none; font-size: .8rem; font-weight: 750; }
.graph-empty-action.secondary { border: 1px solid var(--line); background: var(--surface); color: var(--ink) !important; }
.graph-edge { stroke: var(--line); stroke-width: 2; }
.graph-node circle { fill: var(--surface); stroke: var(--teal); stroke-width: 2; }
.graph-node button { cursor: pointer; }
.graph-node text { fill: var(--ink); font-size: 12px; font-weight: 750; pointer-events: none; }
.graph-detail { padding: 26px; border-left: 1px solid var(--line); background: var(--surface); }
.graph-detail h3 { margin: 0 0 10px; font-size: 1.4rem; }
.graph-detail p { color: var(--muted); }
.graph-detail dl { margin: 20px 0 0; }
.graph-detail dl div { padding: 9px 0; border-top: 1px solid var(--line); }
.graph-detail dt { color: var(--muted); font-size: .68rem; text-transform: uppercase; }
.graph-detail dd { margin: 3px 0 0; overflow-wrap: anywhere; font-size: .82rem; }
.evidence-panel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; border-top: 1px solid var(--line); background: var(--line); }
.truth-empty { display: grid; place-content: center; min-height: 180px; padding: 30px; text-align: center; }
.truth-empty p { max-width: 500px; margin: 6px auto 0; color: var(--muted); font-size: .82rem; }
.entity-list { display: grid; gap: 9px; }
.entity-list.compact .truth-empty { min-height: 120px; }
.entity-row { display: grid; grid-template-columns: minmax(180px, 1fr) repeat(3, minmax(110px, .55fr)); gap: 12px; align-items: center; padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.entity-row button { padding: 0; border: 0; background: transparent; color: var(--ink); text-align: left; font-weight: 760; }
.entity-row span { color: var(--muted); font-size: .78rem; }
.provider-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.provider-grid article { min-height: 190px; padding: 22px; border: 1px solid var(--line); border-radius: 18px; }
.provider-grid article > span { color: var(--blue); font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.provider-grid h3 { margin: 28px 0 20px; font-size: 1.15rem; }
.provider-state { color: var(--muted); font-size: .76rem; }
.provider-state.is-connected { color: var(--green); }
.domain-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.domain-grid article { min-height: 250px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); scroll-margin-top: 78px; }
.domain-grid h2 { font-size: 1.75rem; }
.domain-state { margin-top: 22px !important; padding-top: 16px; border-top: 1px solid var(--line); font-size: .8rem; }
.account-technical-details { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: .78rem; }
.account-technical-details summary { cursor: pointer; font-weight: 700; }
.account-technical-details div { display: grid; gap: 4px; margin-top: 12px; }
.account-technical-details strong { overflow-wrap: anywhere; color: var(--ink); }
.plan-technical-details { margin: 14px 0; color: var(--muted); font-size: .78rem; }
.plan-technical-details summary { cursor: pointer; font-weight: 700; }
.plan-technical-details p { margin: 7px 0 0; overflow-wrap: anywhere; }
.saas-hero { display: grid; gap: 34px; padding: 0 0 44px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); }
.workspace-intro { max-width: 880px; }
.eyebrow { margin: 0 0 14px; color: var(--blue) !important; font-size: .72rem !important; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.workspace-intro h1 { max-width: 840px; margin: 0 0 22px; font-size: clamp(2.85rem, 6vw, 5.1rem); }
.saas-hero .workspace-lede { max-width: 720px; margin: 0; color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.25rem); }

.identity-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(270px, .6fr); gap: 16px; margin: 0; align-items: start; }
.identity-card, .compatibility-panel { min-width: 0; padding: 28px; border: 1px solid var(--line); border-radius: 28px; background: var(--surface); color: var(--ink); box-shadow: var(--app-shadow); }
.identity-heading { display: flex; justify-content: space-between; align-items: start; gap: 18px; }
.identity-heading h2 { margin: 0 0 8px; font-size: 1.55rem; }
.identity-heading p, .compatibility-panel > p { margin: 0; color: var(--muted); font-size: .82rem; }
.compatibility-panel { border-radius: var(--radius); box-shadow: none; }
.compatibility-panel summary { cursor: pointer; font-weight: 760; }

.credential-panel, .browser-login-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 14px; margin-top: 24px; padding: 0; border: 0; background: transparent; }
.credential-panel label, .session-actions label, .connector-form > label, .scope-form > label { display: grid; gap: 7px; color: var(--muted); font-size: .76rem; font-weight: 750; }
.credential-panel input, .credential-panel select, .session-actions input, .connector-form select, .scope-form input, .scope-form select, .scope-form textarea {
  width: 100%; min-width: 0; padding: 12px 13px; border: 1px solid var(--line); border-radius: 11px; outline: none; background: var(--bg); color: var(--ink);
}
.scope-form textarea { min-height: 120px; resize: vertical; }
.credential-panel input:focus, .credential-panel select:focus, .session-actions input:focus, .connector-form select:focus, .scope-form input:focus, .scope-form select:focus, .scope-form textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.credential-panel button, .session-actions button, .connector-form button, .scope-form button, #deferOperationalContext {
  min-height: 46px; padding: 10px 18px; border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: #fff; font-weight: 720;
}
.credential-panel button:disabled, .session-actions button:disabled, .connector-form button:disabled, .scope-form button:disabled, #deferOperationalContext:disabled { cursor: not-allowed; opacity: .46; }
.credential-note,
.saas-hero .credential-note { margin: 13px 0 0; color: var(--muted); font-size: .75rem; }
#connectionStatus { margin: 0; padding: 13px 16px; border-left: 3px solid var(--teal); background: #eef6f3; color: var(--muted); font-size: .82rem; font-weight: 700; }

.session-panel { display: grid; gap: 14px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.session-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.session-grid div { min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: var(--bg); }
.session-grid small { display: block; margin-bottom: 4px; color: var(--muted); font-size: .7rem; }
.session-grid strong { display: block; overflow-wrap: anywhere; font-size: .84rem; }
.session-actions { display: grid; grid-template-columns: minmax(180px, 1fr) auto auto; gap: 9px; align-items: end; }
.session-actions .secondary-button { border-color: var(--line); background: var(--surface); color: var(--ink); }

.workspace-section { padding: 54px 0 16px; }
.section-heading { max-width: 760px; margin-bottom: 24px; }
.section-heading h2 { margin: 0; font-size: clamp(2rem, 4vw, 3.1rem); }
.saas-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.card.saas-card, .card.saas-section { min-height: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: none; }
.card.saas-card { padding: 22px; }
.saas-card small { color: var(--muted); }
.saas-card strong { display: block; margin-top: 9px; color: var(--ink); font-size: 1.25rem; overflow-wrap: anywhere; }
.card.saas-section { padding: clamp(24px, 4vw, 40px); scroll-margin-top: 78px; }
.saas-section h2 { margin: 0 0 8px; font-size: clamp(1.75rem, 3vw, 2.45rem); }
.saas-section > p:not(.eyebrow) { max-width: 820px; margin-top: 0; color: var(--muted); }

.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.plan { padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.plan.current { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.step-list, .support-list, .usage-list, .connector-guidance, .scope-readiness { display: grid; gap: 9px; }
.step, .support-row, .usage-row, .connector-guidance-row, .scope-readiness-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.step p, .support-row p, .usage-row p, .scope-readiness-row p { margin: 4px 0 0; color: var(--muted); font-size: .8rem; }
.state { justify-self: end; padding: 5px 9px; border-radius: 999px; font-size: .67rem; font-weight: 850; text-transform: uppercase; }
.state.completed, .state.active, .state.available { background: #e9f7f0; color: var(--green); }
.state.warning, .state.grace, .state.in_progress { background: #fff4df; color: var(--amber); }
.state.blocked, .state.suspended, .state.exhausted { background: #fff0ef; color: var(--red); }
.state.pending, .state.unknown { background: #eff1ef; color: #525a56; }

.scope-panel { margin-top: 18px; padding: clamp(18px, 3vw, 26px); border: 1px solid var(--line); border-radius: 18px; background: #fafbf9; }
.scope-panel h3 { margin: 0 0 7px; font-size: 1.25rem; }
.scope-panel > p { color: var(--muted); }
.connector-form, .scope-form { display: grid; grid-template-columns: minmax(210px, .85fr) minmax(280px, 1.15fr) auto; align-items: end; gap: 13px; }
.connector-review { grid-template-columns: auto minmax(0, 1fr) !important; align-items: start !important; column-gap: 9px !important; line-height: 1.45; }
.connector-review input { width: auto; margin: 3px 0 0; }
.connector-guidance, .scope-readiness { margin-top: 14px; }
.scope-status { margin: 12px 0 0; color: var(--muted); font-size: .8rem; font-weight: 700; }
.context-onboarding-tools { margin: 18px 0; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.context-onboarding-tools summary { cursor: pointer; font-weight: 760; }
.context-onboarding-tools .scope-form { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.scope-services { display: grid; gap: 8px; }
.scope-service { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; }
.scope-service span:not(.state) { display: grid; gap: 3px; }
.scope-service small { color: var(--muted); font-size: .74rem; }
.boundary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.boundary { padding: 15px; border-left: 3px solid var(--teal); border-radius: 10px; background: var(--bg); }
.boundary strong { display: block; }
.boundary span { color: var(--muted); font-size: .8rem; }

[hidden] { display: none !important; }

.protected-app :focus-visible { outline: 3px solid rgba(37,99,235,.35); outline-offset: 3px; }

@media (max-width: 1000px) {
  .command-center { grid-template-columns: 1fr; }
  .product-session { justify-self: start; }
  .engine-status-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .graph-layout { grid-template-columns: 1fr; }
  .graph-detail { border-top: 1px solid var(--line); border-left: 0; }
  .provider-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .identity-grid { grid-template-columns: 1fr; }
  .session-grid, .saas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .app-header { min-height: 70px; padding-inline: 18px; }
  .app-wordmark img { width: 42px; height: 42px; }
  .access-label { display: none; }
  .app-nav-inner, .saas-main { width: min(calc(100% - 32px), var(--max)); }
  .app-nav .account-nav-link { margin-left: 0; }
  .saas-main { padding-top: 48px; }
  .product-session { width: 100%; border-radius: 16px; flex-wrap: wrap; }
  .product-session span { flex: 1 1 120px; }
  .product-session button { width: 100%; }
  .ask-workspace { padding: 20px; border-radius: 20px; }
  .engine-status-strip, .evidence-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-section-heading, .split-product-section { display: grid; grid-template-columns: 1fr; gap: 18px; }
  .graph-workspace .product-section-heading { padding: 24px 20px 0; }
  .graph-lenses { justify-content: flex-start; }
  .graph-empty-content { padding: 24px; }
  .graph-empty-content::before { inset: 8% 12px; }
  .graph-empty-content h3 { width: calc(100% - 32px); }
  .graph-empty-readiness { gap: 6px; margin-top: 14px; }
  .graph-empty-actions { margin-top: 14px; }
  .product-section, .split-product-section { padding: 24px 20px; }
  .graph-workspace { padding: 0; }
  .provider-grid, .domain-grid { grid-template-columns: 1fr; }
  .domain-grid article { min-height: 0; }
  .truth-empty { min-height: 0; padding: 20px 12px; }
  .graph-layout { min-height: 0; }
  .graph-canvas { min-height: 390px; }
  .graph-canvas svg { height: 390px; }
  .graph-detail { min-height: 0; padding: 18px 20px; }
  .graph-detail .eyebrow { margin-bottom: 8px; }
  .graph-detail h3 { font-size: 1.15rem; }
  .entity-row { grid-template-columns: 1fr 1fr; }
  .operational-answer dl { grid-template-columns: 1fr; }
  .credential-panel, .browser-login-form, .session-grid, .session-actions, .saas-grid, .plan-grid, .connector-form, .scope-form, .boundary-grid { grid-template-columns: 1fr; }
  .identity-card, .compatibility-panel { padding: 21px; border-radius: 20px; }
  .identity-heading { align-items: flex-start; }
  .state { justify-self: start; }
  .step, .support-row, .usage-row, .scope-readiness-row { grid-template-columns: 1fr; }
}

@media (max-width: 390px) {
  .app-header { gap: 10px; }
  .app-wordmark { gap: 8px; font-size: .88rem; }
  .environment-badge { padding: 6px 8px; font-size: .68rem; }
  .app-nav-inner { width: calc(100% - 24px); }
  .saas-main { width: calc(100% - 24px); }
  .workspace-intro h1 { font-size: 2.55rem; }
  .saas-main { padding-top: 28px; gap: 16px; }
  .command-center { gap: 18px; padding-top: 4px; padding-bottom: 32px; }
  .product-hero-copy h1 { margin-bottom: 14px; font-size: 1.95rem; line-height: 1.03; }
  .product-hero-copy > p:last-child { font-size: .96rem; line-height: 1.5; }
  .product-session { gap: 6px; padding: 7px; }
  .product-session span { flex-basis: 105px; padding-inline: 7px; }
  .graph-canvas { min-height: 340px; }
  .graph-canvas svg { height: 340px; }
  .graph-empty-content { padding: 18px; }
  .graph-empty-content h3 { width: calc(100% - 24px); font-size: 1.45rem; }
  .graph-empty-content > p:not(.eyebrow) { margin-top: 9px; font-size: .78rem; }
  .graph-empty-readiness { margin-top: 10px; }
  .graph-empty-actions { margin-top: 10px; }
  .graph-empty-action { padding: 8px 12px; font-size: .75rem; }
  .identity-heading { display: grid; }
  .scope-service { grid-template-columns: auto minmax(0, 1fr); }
  .scope-service .state { grid-column: 2; }
  .ask-row { grid-template-columns: 1fr; }
  .ask-row button { min-height: 46px; }
  .graph-canvas svg { min-width: 620px; }
  .graph-empty-actions { max-width: 250px; }
}

@media (max-width: 900px) {
  .app-header { position: sticky; top: 0; z-index: 70; min-height: 70px; }
  .access-label { display: none; }
  .protected-app.is-authenticated .environment-badge { display: none; }
  .protected-app.is-authenticated .app-menu-toggle { display: inline-flex; min-height: 44px; align-items: center; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-weight: 750; }
  .app-nav { position: fixed; inset: 70px 0 auto; z-index: 65; display: none; max-height: calc(100dvh - 70px); overflow-y: auto; border-bottom: 1px solid var(--line); box-shadow: var(--app-shadow); }
  .protected-app.is-authenticated .app-nav.is-open { display: block; }
  .app-nav-inner { display: grid; width: min(calc(100% - 32px), 560px); gap: 2px; overflow: visible; padding: 14px 0 20px; scroll-snap-type: none; }
  .app-nav a { width: 100%; min-height: 42px; padding: 8px 12px; scroll-snap-align: none; }
  .app-nav a.is-current { border-left: 3px solid var(--blue); }
  .app-nav .account-nav-link { margin: 0; border: 0; background: transparent; }
  .mobile-nav-status { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 10px; color: var(--muted); font-size: .74rem; font-weight: 750; }
  .mobile-nav-separator { display: block; height: 1px; margin: 8px 0; background: var(--line); }
  .mobile-sign-out { display: flex; width: 100%; min-height: 44px; align-items: center; padding: 8px 12px; border: 0; border-radius: 9px; background: transparent; color: var(--ink); font-weight: 680; text-align: left; }
  .mobile-sign-out:hover, .mobile-sign-out:focus-visible { background: var(--surface); }
}

/* APP_LOGO_WHITE_FILL — app only; preserve original navy logo pixels */
.app-wordmark img {
  filter: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201600%201600%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M%20810%20585%20L%20772%20589%20L%20749%20657%20L%20717%20717%20L%20664%20787%20L%20602%20847%20L%20614%20904%20L%20633%20901%20L%20667%20902%20L%20695%20910%20L%20723%20927%20L%20744%20949%20L%20757%20970%20L%20775%201012%20L%20788%201053%20L%20810%201055%20L%20832%201053%20L%20846%201014%20L%20864%20979%20L%20891%20942%20L%20917%20916%20L%20969%20880%20L%201017%20858%20L%201020%20820%20L%201018%20807%20L%20971%20783%20L%20937%20758%20L%20911%20733%20L%20876%20686%20L%20862%20659%20L%20848%20622%20L%20840%20588%20Z%22%2F%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M%20900%20183%20L%20883%20198%20L%20872%20225%20L%20872%20551%20L%20883%20612%20L%20903%20659%20L%20929%20697%20L%20955%20724%20L%20980%20744%20L%201012%20764%20L%201043%20779%20L%201091%20796%20L%201133%20806%20L%201230%20822%20L%201242%20830%20L%201242%20836%20L%201231%20843%20L%201107%20865%20L%201037%20887%20L%201003%20903%20L%201025%20912%20L%201296%201066%20L%201324%201070%20L%201350%201062%20L%201377%201038%20L%201386%201021%20L%201391%201002%20L%201391%20501%20L%201388%20481%20L%201378%20452%20L%201361%20425%20L%201334%20399%20L%20955%20177%20L%20937%20174%20L%20916%20176%20Z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}