/*
 * The palette is not here any more.
 *
 * It lives in src/brand/aide-brand.ts and is emitted to brand-tokens.css, which
 * every Daleen page links before this file. Four files used to declare this palette
 * independently; #245aa8 had two names and the status green had two values,
 * because nothing connected them.
 *
 * This stylesheet consumes tokens and must not declare a color. A test fails if
 * a canonical brand hex is written anywhere outside the source module -- and if
 * you need a color that is not a token, the token set is where to add it, which
 * is also where the contrast gate will check it.
 *
 * Linked from the page rather than @import-ed here, because a CSS @import cannot
 * start downloading until this file has arrived and so serializes what should be
 * two parallel requests. A test asserts every Daleen page links brand-tokens.css
 * before site.css, which is the part a person would otherwise forget.
 */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

section[id],
.usage-estimator {
  scroll-margin-top: 96px;
}

body {
  margin: 0;
  color: var(--ink);
  background: #ffffff;
  font-family: var(--font-stack);
  letter-spacing: 0;
}

body.nav-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

[hidden] {
  display: none !important;
}

button,
input,
select {
  font: inherit;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  height: 76px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 0 42px;
  border-bottom: 1px solid rgba(7, 24, 90, 0.1);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
}

.brand {
  display: inline-flex;
  align-items: center;
}

.brand img {
  width: 149px;
  height: auto;
  display: block;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  color: #344d78;
  font-size: 14px;
  font-weight: 800;
}

.site-nav a {
  padding: 8px 0;
}

.site-nav a:hover {
  color: var(--blue-dark);
}

.header-actions,
.hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-user-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.header-user-button {
  width: 42px;
  height: 42px;
  border: 1px solid #cfdceb;
  border-radius: 999px;
  background: #fff;
  color: var(--navy);
  display: inline-grid;
  place-items: center;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}

.header-user-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 50;
  width: 190px;
  border: 1px solid #d6e0ea;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 36px rgba(10, 24, 45, 0.14);
  padding: 7px;
  display: grid;
  gap: 2px;
}

.header-user-popover a,
.header-user-popover button {
  min-height: 34px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #213b63;
  padding: 0 9px;
  text-align: left;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
}

.header-user-popover a:hover,
.header-user-popover button:hover {
  background: #edf5ff;
  color: #0b4f91;
}

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-direction: column;
}

.nav-toggle span {
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--navy);
  transition: transform 0.16s ease, opacity 0.16s ease;
}

.nav-toggle[aria-expanded="true"] span:first-child {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:last-child {
  transform: translateY(-6px) rotate(-45deg);
}

.button {
  min-height: 42px;
  border-radius: 8px;
  padding: 0 16px;
  border: 1px solid #c9d9ee;
  background: #fff;
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

.button.large {
  min-height: 52px;
  padding-inline: 22px;
  font-size: 16px;
}

.button.primary {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  box-shadow: 0 12px 24px rgba(11, 120, 255, 0.22);
}

.button.secondary {
  background: #fff;
  border-color: #cbdcf0;
}

.button.dark {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.button.ghost {
  border-color: transparent;
  background: transparent;
  color: var(--blue-dark);
}

.button.ghost.signed-in {
  border-color: #bdeacc;
  background: #ebfff3;
  color: #13723a;
}

.button:disabled,
input:disabled,
select:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.wide-button {
  width: 100%;
}

.hero,
.homepage-video-section,
.category-section,
.problem-section,
.prompt-wizard-section,
.evidence-section,
.genesis-section,
.pricing-section,
.checkout-section,
.onboarding-section,
.app-preview-section,
.admin-section {
  background-color: #ffffff;
  background-image:
    linear-gradient(rgba(33, 115, 242, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(33, 115, 242, 0.045) 1px, transparent 1px);
  background-size: 48px 48px;
}

.hero {
  display: grid;
  grid-template-columns: minmax(420px, 0.9fr) minmax(560px, 1.1fr);
  gap: 58px;
  padding: 84px 72px 66px;
  align-items: center;
  overflow: hidden;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid #d5e7ff;
  border-radius: 8px;
  background: var(--soft-2);
  color: var(--blue-dark);
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
  text-transform: uppercase;
}

.hero h1,
.section-heading h2,
.video-copy h2,
.category-statement h2,
.evidence-copy h2,
.genesis-copy h2 {
  margin: 22px 0 0;
  color: var(--navy);
  font-family: "Aptos Display", Inter, Arial, Helvetica, sans-serif;
  font-size: clamp(44px, 5vw, 72px);
  line-height: 0.94;
  font-weight: 900;
  letter-spacing: 0;
}

.hero-lede,
.section-heading p,
.video-copy p,
.category-statement p,
.evidence-copy p,
.genesis-copy p {
  margin: 22px 0 0;
  color: #2d5590;
  font-size: 21px;
  line-height: 1.28;
  font-weight: 500;
}

.hero-actions {
  margin-top: 32px;
}

.hero-proof {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 38px;
}

.hero-proof div {
  min-width: 0;
  border-left: 4px solid var(--blue);
  padding-left: 14px;
}

.hero-proof strong {
  display: block;
  color: var(--navy);
  font-size: 15px;
  text-transform: uppercase;
}

.hero-proof span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.25;
}

.hero-product {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow);
  padding: 18px;
}

.product-topline {
  height: 42px;
  border: 1px solid #d8e6f7;
  border-radius: 10px;
  background: #f4f8fe;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  color: var(--navy);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.live-state {
  color: var(--green);
}

.product-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(220px, 0.85fr);
  gap: 16px;
  margin-top: 16px;
}

.contract-panel,
.readiness-panel,
.plan-card,
.usage-estimator,
.checkout-card,
.order-summary,
.source-card,
.readiness-checklist,
.account-auth-card,
.app-preview,
.communications-panel,
.license-preview {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
  box-shadow: var(--soft-shadow);
}

.contract-panel {
  padding: 18px;
}

.contract-panel header {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 14px;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid #dce8f5;
}

.panel-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid #cfdef1;
  background: #edf6ff;
  color: var(--blue-dark);
  display: inline-grid;
  place-items: center;
  font-weight: 900;
}

.code-icon::before {
  content: "</>";
  font-size: 21px;
}

.contract-panel h2,
.contract-panel h3,
.readiness-panel h3,
.plan-card h3,
.source-card h3,
.readiness-checklist h3,
.order-summary h3,
.checkout-card h3,
.account-auth-card h3,
.next-actions h4,
.communications-panel h4,
.license-grid aside h3 {
  margin: 0;
  color: var(--navy);
  font-size: 24px;
  line-height: 1.08;
  font-weight: 900;
}

.contract-panel p,
.plan-card p,
.usage-estimator p,
.order-summary p,
.setup-cards p,
.source-options span,
.source-card p,
.readiness-checklist p,
.account-auth-card p,
.license-grid aside p,
.roi-card p,
.process-grid p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.3;
}

.work-steps {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.work-step {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 11px;
  border: 1px solid #d5e3f4;
  border-left: 6px solid var(--blue);
  border-radius: 9px;
  background: #fff;
}

.work-step.purple {
  border-left-color: var(--purple);
}

.work-step.green {
  border-left-color: var(--green);
}

.work-step > span {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
}

.work-step.purple > span {
  background: var(--purple);
}

.work-step.green > span {
  background: var(--green);
}

.work-step strong {
  display: block;
  color: var(--navy);
  font-size: 14px;
  text-transform: uppercase;
}

.work-step small {
  display: block;
  margin-top: 3px;
  color: #526d95;
  font-size: 12px;
}

.work-step em,
.state,
.plan-heading span {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
  padding: 0 8px;
  background: #ecf5ff;
  color: var(--blue-dark);
  border: 1px solid #d2e4fb;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.artifact-flow {
  display: grid;
  grid-template-columns: 1fr 14px 1fr 14px 1fr 14px 1fr 14px 1fr;
  gap: 8px;
  margin-top: 18px;
  align-items: center;
}

.artifact-flow span {
  min-height: 48px;
  border: 1px solid #d5e3f4;
  border-radius: 9px;
  background: #fff;
  display: grid;
  place-items: center;
  color: var(--navy);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.artifact-flow b {
  height: 3px;
  background: var(--blue);
  border-radius: 3px;
  position: relative;
}

.artifact-flow b::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -4px;
  border-left: 8px solid var(--blue);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.readiness-panel {
  padding: 18px;
}

.score-ring {
  --score: 82;
  width: 162px;
  height: 162px;
  margin: 4px auto 18px;
  border-radius: 50%;
  background: conic-gradient(var(--green) calc(var(--score) * 1%), #dbe9f6 0);
  display: grid;
  place-items: center;
  position: relative;
}

.score-ring::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  background: #fff;
}

.score-ring strong,
.score-ring span {
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 1;
}

.score-ring strong {
  color: var(--navy);
  font-size: 42px;
  font-weight: 900;
  transform: translateY(-8px);
}

.score-ring span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  transform: translateY(28px);
}

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

.evidence-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e1ebf6;
  color: var(--muted);
  font-size: 13px;
}

.evidence-list strong {
  color: var(--navy);
}

.proof-band,
.homepage-video-section,
.category-section,
.problem-section,
.prompt-wizard-section,
.evidence-section,
.genesis-section,
.roi-section,
.provision-section {
  padding: 76px 72px;
  background: #f7fbff;
  border-top: 1px solid #dfe9f5;
  border-bottom: 1px solid #dfe9f5;
}

.homepage-video-section {
  display: grid;
  grid-template-columns: minmax(360px, 0.85fr) minmax(560px, 1.15fr);
  gap: 36px;
  align-items: center;
  background: #fff;
}

.video-copy h2,
.category-statement h2,
.evidence-copy h2,
.genesis-copy h2 {
  max-width: 860px;
  font-size: clamp(34px, 3.4vw, 52px);
}

.video-frame {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow);
  padding: 18px;
}

.video-screen {
  min-height: 322px;
  border-radius: 12px;
  border: 1px solid #d5e3f4;
  background:
    linear-gradient(135deg, rgba(7, 24, 90, 0.92), rgba(11, 120, 255, 0.82)),
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: auto, 34px 34px, 34px 34px;
  color: #fff;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  padding: 34px;
}

.play-button {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: #fff;
  position: relative;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);
}

.play-button::after {
  content: "";
  position: absolute;
  left: 31px;
  top: 24px;
  border-left: 24px solid var(--blue);
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

.video-screen strong {
  display: block;
  font-size: 34px;
  line-height: 1;
  font-weight: 900;
}

.video-screen p {
  max-width: 560px;
  margin: 12px 0 0;
  color: #dce9ff;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 700;
}

.video-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 14px;
}

.video-timeline span {
  height: 6px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--blue), #74b7ff);
  opacity: calc(0.28 + (var(--step) * 0.14));
}

.category-section {
  display: grid;
  grid-template-columns: minmax(420px, 0.95fr) minmax(460px, 1.05fr);
  gap: 34px;
  align-items: center;
}

.category-statement strong {
  display: block;
  margin-top: 18px;
  color: var(--blue-dark);
  font-size: clamp(24px, 2.6vw, 42px);
  line-height: 1;
  font-weight: 900;
}

.category-grid,
.problem-grid,
.wizard-grid,
.evidence-metrics,
.genesis-facts {
  display: grid;
  gap: 14px;
}

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

.category-grid div,
.problem-grid article,
.wizard-grid article,
.evidence-metrics div,
.genesis-facts div,
.wizard-note {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--soft-shadow);
}

.category-grid div,
.genesis-facts div {
  min-height: 126px;
  padding: 20px;
}

.category-grid span,
.problem-grid span,
.evidence-metrics span,
.genesis-facts span,
.wizard-grid span {
  color: var(--blue-dark);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.category-grid strong,
.genesis-facts strong {
  display: block;
  margin-top: 14px;
  color: var(--navy);
  font-size: 22px;
  line-height: 1.05;
}

.problem-section,
.prompt-wizard-section,
.genesis-section {
  background: #fff;
}

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

.problem-grid article,
.wizard-grid article,
.evidence-metrics div {
  padding: 20px;
}

.problem-grid p,
.wizard-grid p,
.evidence-metrics p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.3;
}

.wizard-grid {
  grid-template-columns: repeat(3, 1fr);
}

.wizard-grid h3 {
  margin: 14px 0 0;
  color: var(--navy);
  font-size: 22px;
  line-height: 1.05;
}

.wizard-note {
  margin-top: 16px;
  min-height: 76px;
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-left: 6px solid var(--blue);
}

.wizard-note strong {
  color: var(--navy);
  font-size: 18px;
}

.wizard-note span {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.25;
}

.evidence-section {
  display: grid;
  grid-template-columns: minmax(360px, 0.88fr) minmax(560px, 1.12fr);
  gap: 34px;
  align-items: center;
  background: #f7fbff;
}

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

.evidence-metrics strong {
  display: block;
  margin-top: 14px;
  color: var(--green);
  font-size: 26px;
  line-height: 1;
}

.genesis-section {
  display: grid;
  grid-template-columns: minmax(420px, 0.95fr) minmax(420px, 1.05fr);
  gap: 34px;
  align-items: center;
}

.genesis-facts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 34px;
}

.section-heading.center {
  display: block;
  max-width: 860px;
  margin-inline: auto;
  text-align: center;
}

.section-heading h2,
.roi-copy h2 {
  max-width: 900px;
  font-size: clamp(34px, 3.4vw, 52px);
}

.section-heading p {
  max-width: 780px;
  font-size: 18px;
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.process-grid article,
.roi-card,
.setup-cards article,
.source-options button,
.license-metrics div,
.metrics div,
.next-actions div,
.object-model div {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--soft-shadow);
}

.process-grid article {
  padding: 22px;
}

.process-number {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 900;
}

.process-grid h3 {
  margin: 18px 0 0;
  color: var(--navy);
  font-size: 20px;
  line-height: 1.08;
}

.roi-section {
  display: grid;
  grid-template-columns: minmax(360px, 0.9fr) minmax(520px, 1.1fr);
  gap: 46px;
  align-items: center;
  background: #fff;
}

.roi-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.roi-card {
  min-height: 178px;
  padding: 20px;
}

.roi-card span {
  color: var(--blue-dark);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.roi-card strong {
  display: block;
  margin-top: 20px;
  color: var(--navy);
  font-size: 28px;
  line-height: 1;
}

.pricing-section,
.checkout-section,
.onboarding-section,
.app-preview-section,
.admin-section {
  padding: 76px 72px;
}

.prompt-workspace-shell {
  display: grid;
  grid-template-columns: 286px minmax(0, 1fr) 272px;
  gap: 18px;
  align-items: start;
}

.prompt-workspace-controls,
.prompt-contract-workbench,
.prompt-readiness-panel {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--soft-shadow);
}

.prompt-workspace-controls {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.prompt-workspace-controls div,
.prompt-workspace-controls label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.prompt-workspace-controls span {
  color: var(--blue-dark);
}

.prompt-workspace-controls input,
.prompt-workspace-controls select {
  width: 100%;
  height: 42px;
  border: 1px solid #cbdcf0;
  border-radius: 8px;
  background: #fff;
  color: var(--navy);
  padding: 0 12px;
  font-size: 14px;
  font-weight: 800;
  text-transform: none;
}

.prompt-workspace-controls input[type="password"] {
  letter-spacing: 0;
}

.prompt-section-rail {
  border-top: 1px solid #e1edf8;
  padding-top: 12px;
  display: grid;
  gap: 8px;
}

.prompt-section-rail a {
  min-height: 32px;
  border: 1px solid #d8e7f7;
  border-radius: 8px;
  background: #f7fbff;
  color: #31527e;
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 900;
}

.prompt-contract-workbench {
  min-width: 0;
  overflow: hidden;
}

.prompt-contract-workbench header {
  min-height: 76px;
  border-bottom: 1px solid #e0ebf6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
}

.prompt-workbench-actions,
.prompt-review-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.prompt-contract-workbench header span,
.prompt-readiness-panel span,
.prompt-contract-row span,
.prompt-contract-row small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.prompt-contract-workbench header strong {
  display: block;
  margin-top: 5px;
  color: var(--navy);
  font-size: 22px;
}

.prompt-contract-list {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.prompt-contract-row {
  min-height: 86px;
  border: 1px solid #d8e6f5;
  border-radius: 10px;
  background: #fbfdff;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 112px 132px 132px 74px;
  align-items: center;
  gap: 14px;
  padding: 14px;
}

.prompt-contract-row strong {
  display: block;
  margin: 5px 0;
  color: var(--navy);
  font-size: 16px;
  line-height: 1.18;
}

.prompt-contract-row > div:nth-child(3) {
  display: grid;
  gap: 5px;
  justify-items: start;
}

.prompt-contract-row button {
  min-height: 36px;
  padding: 0 12px;
}

.prompt-contract-empty {
  min-height: 160px;
  border: 1px dashed #c8daee;
  border-radius: 10px;
  background: #f8fbff;
  display: grid;
  place-content: center;
  gap: 8px;
  padding: 22px;
  text-align: center;
}

.prompt-contract-empty strong {
  color: var(--navy);
  font-size: 20px;
}

.prompt-contract-empty span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.prompt-contract-empty.locked {
  border-color: #f3c5c9;
  background: #fff7f8;
}

.prompt-builder {
  display: grid;
  gap: 16px;
  padding: 16px;
}

.prompt-builder[hidden] {
  display: none;
}

.prompt-builder-section {
  border: 1px solid #d8e6f5;
  border-radius: 10px;
  background: #fbfdff;
  padding: 16px;
  display: grid;
  gap: 14px;
}

.prompt-builder-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.prompt-builder-heading span {
  color: var(--blue-dark);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.prompt-builder-heading strong {
  color: var(--navy);
  font-size: 17px;
  line-height: 1.2;
  text-align: right;
}

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

.prompt-form-grid label,
.prompt-wide-label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.prompt-form-grid .span-2,
.prompt-wide-label {
  grid-column: 1 / -1;
}

.prompt-form-grid input,
.prompt-form-grid select,
.prompt-form-grid textarea,
.prompt-wide-label textarea {
  width: 100%;
  border: 1px solid #cbdcf0;
  border-radius: 8px;
  background: #fff;
  color: var(--navy);
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 750;
  text-transform: none;
}

.prompt-form-grid input,
.prompt-form-grid select {
  height: 42px;
}

.prompt-form-grid textarea,
.prompt-wide-label textarea {
  resize: vertical;
}

.prompt-guidance {
  border: 1px solid #d5e3f4;
  border-radius: 8px;
  background: #f7fbff;
  color: #31527e;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 800;
}

.risk-dimension-grid,
.packet-expectation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.risk-dimension-grid label,
.packet-expectation-grid label {
  min-height: 38px;
  border: 1px solid #dce8f6;
  border-radius: 8px;
  background: #fff;
  color: #31527e;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 900;
}

.risk-dimension-grid input,
.packet-expectation-grid input {
  accent-color: var(--blue);
}

.prompt-review-override {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  color: #314d76;
  font-size: 12px;
  font-weight: 900;
}

.prompt-review-override[hidden] {
  display: none;
}

.prompt-review-override input {
  width: 16px;
  height: 16px;
  accent-color: var(--blue);
}

.prompt-packet-result {
  margin-top: 14px;
  border: 1px solid #cbdcf0;
  border-radius: 8px;
  background: #f8fbff;
  padding: 14px;
}

.prompt-packet-result[hidden] {
  display: none;
}

.prompt-packet-result > span,
.prompt-packet-result dt {
  color: #526b92;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.prompt-packet-result strong {
  display: block;
  margin-top: 5px;
  color: var(--navy);
  font-size: 15px;
  line-height: 1.25;
  word-break: break-word;
}

.prompt-packet-result dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.prompt-packet-result dd {
  margin: 4px 0 0;
  color: #142c4b;
  font-size: 13px;
  font-weight: 900;
  word-break: break-word;
}

.prompt-packet-result ul {
  display: grid;
  gap: 6px;
  margin: 10px 0 0;
  padding-left: 18px;
  color: #314d76;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.prompt-readiness-panel {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.prompt-readiness-panel div {
  min-height: 108px;
  border: 1px solid #dce8f6;
  border-radius: 10px;
  background: #f8fbff;
  padding: 14px;
}

.prompt-readiness-panel div.ready-card {
  border-color: #bdeacc;
  background: #ebfff3;
}

.prompt-readiness-panel div.blocked-card {
  border-color: #f3c5c9;
  background: #fff7f8;
}

.prompt-readiness-panel strong {
  display: block;
  margin-top: 9px;
  color: var(--navy);
  font-size: 18px;
}

.prompt-readiness-panel small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.25;
  font-weight: 800;
}

.segmented {
  display: inline-grid;
  grid-auto-flow: column;
  border: 1px solid #cbdcf0;
  border-radius: 9px;
  background: #f6faff;
  overflow: hidden;
}

.segmented button {
  min-width: 120px;
  height: 44px;
  border: 0;
  border-right: 1px solid #d6e4f3;
  background: transparent;
  color: #3d5b86;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.segmented button:last-child {
  border-right: 0;
}

.segmented button.active {
  background: var(--blue);
  color: #fff;
}

.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.plan-card {
  min-height: 472px;
  padding: 24px;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 16px;
}

.plan-card.featured {
  border: 2px solid var(--blue);
  box-shadow: 0 20px 48px rgba(11, 120, 255, 0.16);
}

.plan-card.selected {
  border-color: var(--blue);
  outline: 3px solid rgba(11, 120, 255, 0.14);
}

.select-plan.selected {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  box-shadow: none;
}

.plan-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
}

.plan-heading h3 {
  font-size: 28px;
}

.price {
  margin: 0;
  color: var(--navy);
  font-size: 42px;
  line-height: 1;
  font-weight: 900;
}

.price small {
  color: var(--muted);
  font-size: 14px;
}

.plan-card ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.plan-card li {
  position: relative;
  padding-left: 24px;
  color: #2d4770;
  font-size: 14px;
  line-height: 1.28;
}

.plan-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--green);
}

.usage-estimator {
  margin-top: 22px;
  padding: 22px;
  display: grid;
  grid-template-columns: 0.9fr 1.2fr 300px;
  gap: 24px;
  align-items: center;
}

.usage-estimator h3 {
  margin: 12px 0 0;
  color: var(--navy);
  font-size: 24px;
}

.estimator-controls {
  display: grid;
  gap: 14px;
}

.estimator-controls label {
  display: grid;
  grid-template-columns: 190px 1fr 48px;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.estimator-controls input[type="range"] {
  width: 100%;
  accent-color: var(--blue);
}

.estimator-controls strong {
  color: var(--navy);
  text-align: right;
}

.estimate-output {
  border: 1px solid #cfe0f4;
  border-radius: 12px;
  background: #fff;
  padding: 18px;
}

.estimate-output span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.estimate-output strong {
  display: block;
  margin-top: 8px;
  color: var(--navy);
  font-size: 28px;
}

.estimate-output p {
  color: #31527e;
  font-size: 13px;
  line-height: 1.28;
}

.checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 22px;
}

.checkout-card,
.order-summary {
  padding: 24px;
}

.stepper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 22px;
}

.stepper span {
  min-height: 38px;
  border: 1px solid #d4e4f7;
  border-radius: 8px;
  background: #edf5ff;
  color: #40618f;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.stepper .active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.buying-mode {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.buying-mode button,
.source-options button {
  text-align: left;
  cursor: pointer;
}

.buying-mode button {
  min-height: 76px;
  border: 1px solid #d4e4f7;
  border-radius: 10px;
  background: #fff;
  color: var(--navy);
  font-weight: 900;
  padding: 14px;
}

.buying-mode button.active,
.source-options button.active {
  border: 2px solid var(--blue);
  background: #f7fbff;
}

.buying-mode button:focus-visible,
.source-options button:focus-visible,
.button:focus-visible,
.segmented button:focus-visible,
.nav-toggle:focus-visible {
  outline: 3px solid rgba(11, 120, 255, 0.22);
  outline-offset: 2px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.form-grid label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.form-grid .wide {
  grid-column: 1 / -1;
}

.form-grid input,
.form-grid select {
  width: 100%;
  height: 42px;
  border: 1px solid #cbdcf0;
  border-radius: 8px;
  background: #fff;
  color: var(--navy);
  padding: 0 12px;
  font-size: 14px;
  font-weight: 800;
}

.checkout-status {
  margin-top: 12px;
  min-height: 40px;
  border: 1px solid #d5e3f4;
  border-radius: 8px;
  background: #f7fbff;
  color: #31527e;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 800;
}

.checkout-status.success {
  border-color: #bdeacc;
  background: #ebfff3;
  color: #13723a;
}

.checkout-status.error {
  border-color: #f3c5c9;
  background: #fff2f3;
  color: #a0161c;
}

.agreements {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.agreements label {
  min-height: 46px;
  border: 1px solid #d5e3f4;
  border-radius: 9px;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  color: #2f4973;
  font-size: 13px;
  line-height: 1.25;
}

.agreements input {
  accent-color: var(--blue);
}

/* Shared by the checkout Account step and the seat-activation panel. The selectors
   carry the extra class deliberately: both host containers style bare `label` and
   `input` at the same specificity and later in this file, and losing the cascade there
   would render the consent language as an uppercase field label. */
.sms-consent {
  grid-column: 1 / -1;
  border: 1px solid #d5e3f4;
  border-radius: 9px;
  background: #fff;
  padding: 13px 14px;
}

.sms-consent label.sms-consent-agree {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #2f4973;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  text-transform: none;
}

.sms-consent label.sms-consent-agree input {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex: 0 0 auto;
  accent-color: var(--blue);
}

.sms-consent strong {
  color: var(--navy);
  font-weight: 800;
}

.sms-consent a {
  color: var(--blue-dark);
  text-decoration: underline;
}

.sms-consent-note {
  margin: 9px 0 0 26px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  text-transform: none;
  font-weight: 400;
}

.label-optional {
  color: var(--muted);
  font-weight: 700;
  text-transform: none;
  opacity: 0.75;
}

.summary-row,
.summary-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.summary-row {
  border-bottom: 1px solid #e1ebf6;
  padding: 12px 0;
  color: #37547d;
  font-size: 14px;
}

.summary-row strong {
  color: var(--navy);
  text-align: right;
}

.summary-total {
  padding: 18px 0;
  color: var(--navy);
  font-weight: 900;
}

.summary-total strong {
  font-size: 36px;
}

.provision-section {
  background: #fff;
}

.provision-section > div:first-child {
  max-width: 900px;
}

.provision-section h2 {
  margin: 16px 0 0;
  color: var(--navy);
  font-size: clamp(32px, 3vw, 48px);
  line-height: 1;
}

.provision-grid {
  display: grid;
  grid-template-columns: minmax(360px, 0.9fr) minmax(520px, 1.1fr);
  gap: 22px;
  margin-top: 32px;
}

.timeline {
  display: grid;
  gap: 11px;
}

.timeline div {
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  box-shadow: var(--soft-shadow);
}

.timeline span,
.check-row span {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--purple);
}

.timeline .complete span,
.check-row.complete span {
  background: var(--green);
}

.timeline .complete,
.check-row.complete {
  border-color: #bdeacc;
}

.timeline strong {
  color: var(--navy);
  font-size: 14px;
}

.timeline em {
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--emphasis);
}

.timeline .complete em {
  color: var(--green);
}

.object-model {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.object-model div {
  min-height: 104px;
  padding: 18px;
}

.object-model strong {
  display: block;
  color: var(--navy);
  font-size: 17px;
  text-transform: uppercase;
}

.object-model span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
}

.onboarding-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 22px;
}

.setup-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}

.setup-cards article {
  min-height: 160px;
  padding: 18px;
}

.setup-cards span {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid #cfe0f4;
  background: #edf6ff;
  color: var(--blue-dark);
  display: grid;
  place-items: center;
  font-weight: 900;
}

.setup-cards h3 {
  margin: 16px 0 0;
  color: var(--navy);
  font-size: 18px;
}

.source-card,
.readiness-checklist {
  padding: 20px;
}

.source-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 16px;
}

.source-options button {
  min-height: 112px;
  padding: 16px;
}

.source-options strong {
  display: block;
  color: var(--navy);
  font-size: 16px;
}

.source-options span {
  display: block;
}

.readiness-checklist {
  align-self: start;
}

.check-row {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
  color: #334f78;
  font-size: 14px;
}

.check-row span {
  width: 16px;
  height: 16px;
}

.readiness-checklist .button {
  margin-top: 20px;
}

.app-preview-section {
  background-image: none;
  background-color: #eef4fa;
  padding-top: 128px;
}

.account-shell {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  min-width: 0;
}

.account-auth-card {
  padding: 22px;
  display: grid;
  gap: 18px;
  position: sticky;
  top: 100px;
}

.account-login-panel,
.account-activation-panel,
.account-signed-in {
  display: grid;
  gap: 12px;
}

.account-activation-panel {
  border: 1px solid #d8e6f7;
  border-radius: 12px;
  background: #fff;
  padding: 14px;
}

.account-activation-panel.focused {
  border-color: var(--blue);
  box-shadow: 0 16px 32px rgba(11, 120, 255, 0.14);
}

.activation-heading {
  display: grid;
  gap: 6px;
}

.activation-heading span,
.record-panel > div:first-child > span {
  width: fit-content;
  min-height: 24px;
  border: 1px solid #d2e4fb;
  border-radius: 6px;
  background: #ecf5ff;
  color: var(--blue-dark);
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.activation-heading strong {
  color: var(--navy);
  font-size: 18px;
  line-height: 1.08;
}

.account-login-panel label,
.account-activation-panel label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.account-login-panel input,
.account-activation-panel input {
  width: 100%;
  height: 44px;
  border: 1px solid #cbdcf0;
  border-radius: 8px;
  background: #fff;
  color: var(--navy);
  padding: 0 12px;
  font-size: 14px;
  font-weight: 800;
}

.account-signed-in > div {
  min-height: 82px;
  display: grid;
  grid-template-columns: 54px 1fr;
  grid-template-rows: auto auto;
  gap: 4px 12px;
  align-items: center;
  border: 1px solid #d5e3f4;
  border-radius: 10px;
  background: #fff;
  padding: 14px;
}

.account-avatar {
  width: 46px;
  height: 46px;
  grid-row: 1 / span 2;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 900;
}

.account-signed-in strong {
  color: var(--navy);
  font-size: 16px;
}

.account-signed-in small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.account-status {
  min-height: 42px;
  border: 1px solid #d5e3f4;
  border-radius: 8px;
  background: #f7fbff;
  color: #31527e;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 800;
}

.account-status.success {
  border-color: #bdeacc;
  background: #ebfff3;
  color: #13723a;
}

.account-status.error {
  border-color: #f3c5c9;
  background: #fff2f3;
  color: #a0161c;
}

.app-preview {
  min-height: 660px;
  display: grid;
  grid-template-columns: 220px 1fr;
  overflow: hidden;
  min-width: 0;
}

.app-rail {
  background: var(--navy);
  color: #dbe8ff;
  padding: 26px 18px;
  display: grid;
  align-content: start;
  gap: 14px;
}

.app-rail img {
  width: 126px;
  margin-bottom: 12px;
}

.app-rail span {
  height: 38px;
  border-radius: 8px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  color: #dbe8ff;
  font-size: 13px;
  font-weight: 800;
}

.app-rail .active {
  background: rgba(255, 255, 255, 0.13);
  color: #fff;
}

.app-main {
  padding: 28px;
  background: #f4f8fc;
  min-width: 0;
}

.app-main header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.app-main h3 {
  margin: 10px 0 0;
  color: var(--navy);
  font-size: 34px;
  line-height: 1;
}

.account-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.account-summary-strip div {
  min-height: 82px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--soft-shadow);
  padding: 14px;
}

.account-summary-strip span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.account-summary-strip strong {
  display: block;
  margin-top: 10px;
  color: var(--navy);
  font-size: 15px;
  line-height: 1.15;
}

.metrics,
.license-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.metrics div,
.license-metrics div {
  min-height: 116px;
  padding: 16px;
}

.metrics span,
.license-metrics span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.metrics strong,
.license-metrics strong {
  display: block;
  margin-top: 12px;
  color: var(--navy);
  font-size: 34px;
  line-height: 1;
}

.metrics small,
.license-metrics small {
  display: block;
  margin-top: 8px;
  color: var(--blue-dark);
  font-size: 12px;
  font-weight: 800;
}

.basic-dashboard-panel {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--soft-shadow);
  padding: 18px;
  display: grid;
  gap: 16px;
  min-width: 0;
}

.basic-dashboard-panel[hidden] {
  display: none;
}

.basic-dashboard-panel.ready {
  border-color: #bdeacc;
}

.basic-dashboard-panel.blocked {
  border-color: #f0c2c7;
}

.basic-dashboard-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 156px;
  gap: 16px;
  align-items: stretch;
}

.basic-dashboard-header h4 {
  margin: 8px 0 0;
  color: var(--navy);
  font-size: 26px;
  line-height: 1.05;
}

.basic-dashboard-header p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.basic-readiness-score {
  min-height: 116px;
  border-radius: 10px;
  background: #17324d;
  color: #fff;
  padding: 16px;
  display: grid;
  align-content: center;
  justify-items: start;
}

.basic-readiness-score span,
.basic-readiness-score small {
  color: #cfe4ff;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.basic-readiness-score strong {
  margin-top: 8px;
  font-size: 38px;
  line-height: 1;
}

.basic-next-action {
  border: 1px solid #d8e6f7;
  border-radius: 10px;
  background: #f7fbff;
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 14px;
  align-items: center;
}

.basic-next-action span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.basic-next-action strong {
  color: var(--navy);
  font-size: 18px;
  line-height: 1.15;
}

.basic-next-action p {
  grid-column: 1;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.3;
}

.basic-next-action .button {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
}

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

.basic-signal-grid > div {
  min-height: 104px;
  border: 1px solid #dfe9f5;
  border-radius: 10px;
  background: #fbfdff;
  padding: 14px;
  display: grid;
  align-content: start;
  gap: 8px;
}

.basic-signal-grid > div.ready {
  border-color: #bdeacc;
  background: #f1fff7;
}

.basic-signal-grid > div.blocked {
  border-color: #f0c2c7;
  background: #fff6f7;
}

.basic-signal-grid span,
.basic-fact-list span,
.basic-mini-metrics span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.basic-signal-grid strong {
  color: var(--navy);
  font-size: 28px;
  line-height: 1;
}

.basic-signal-grid small {
  color: #4c668a;
  font-size: 12px;
  line-height: 1.25;
  font-weight: 800;
}

.basic-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(260px, 1.2fr);
  gap: 12px;
}

.basic-dashboard-card {
  min-width: 0;
  border: 1px solid #dfe9f5;
  border-radius: 10px;
  background: #fbfdff;
  padding: 14px;
}

.basic-dashboard-card h5 {
  margin: 0 0 12px;
  color: var(--navy);
  font-size: 17px;
  line-height: 1.1;
}

.basic-dashboard-card p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.basic-fact-list,
.basic-mini-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.basic-fact-list div,
.basic-mini-metrics div {
  min-height: 66px;
  border: 1px solid #e4edf7;
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.basic-fact-list strong,
.basic-mini-metrics strong {
  display: block;
  margin-top: 7px;
  color: var(--navy);
  font-size: 15px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.basic-mini-metrics strong {
  font-size: 22px;
}

.basic-card-actions {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.basic-card-actions span {
  color: var(--blue-dark);
  font-size: 12px;
  font-weight: 900;
}

.basic-activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.basic-activity-list li {
  border: 1px solid #e4edf7;
  border-radius: 8px;
  background: #fff;
  padding: 10px;
  display: grid;
  gap: 8px;
}

.basic-activity-list strong {
  color: var(--navy);
  font-size: 13px;
  line-height: 1.2;
}

.basic-activity-list span {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.route-account {
  background: #eef2f5;
}

.route-account main > section:not(#account),
.route-account .site-header,
.route-account .site-footer,
.route-account #account > .section-heading,
.route-account #account .admin-section {
  display: none;
}

.route-account #account {
  min-height: 100vh;
  padding: 0;
  background: #eef2f5;
}

.route-account .account-shell {
  max-width: none;
  min-height: 100vh;
  margin: 0;
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  gap: 0;
}

.private-app-sidebar {
  min-height: 100vh;
  border-right: 1px solid #d7e0ea;
  background: #fbfcfd;
  padding: 14px 12px;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 14px;
  align-content: start;
}

.private-app-brand {
  height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  color: #172b43;
  font-size: 14px;
  font-weight: 900;
}

.private-app-brand img {
  width: 126px;
}

.private-app-nav {
  display: grid;
  gap: 3px;
}

.private-app-nav a,
.private-app-nav button {
  min-height: 36px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  padding: 0 10px;
  display: flex;
  align-items: center;
  color: #4b5f74;
  font-size: 13px;
  font-weight: 850;
  text-align: left;
  cursor: pointer;
}

.private-app-nav a.active,
.private-app-nav a:hover,
.private-app-nav button:hover {
  background: #e7f0fa;
  color: #0b4f91;
}

.private-app-mode {
  border: 1px solid #d8e4ee;
  border-radius: 8px;
  background: #f4f8fb;
  padding: 10px;
  display: grid;
  gap: 4px;
}

.private-app-mode span,
.private-app-mode small,
.workspace-panel-header span,
.route-account .account-summary-strip span,
.route-account .metrics span,
.route-account .basic-signal-grid span,
.route-account .basic-fact-list span,
.route-account .basic-mini-metrics span {
  color: #627589;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.private-app-mode strong {
  color: #172b43;
  font-size: 14px;
}

.private-app-mode small {
  text-transform: none;
}

.route-account .account-auth-card {
  position: static;
  padding: 12px;
  border: 1px solid #d8e4ee;
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
  gap: 10px;
}

.route-account:not([data-app-view="account"]) .account-auth-card,
.route-account:not([data-app-view="account"]) .account-summary-strip,
.route-account:not([data-app-view="account"]) .metrics {
  display: none;
}

.route-account .account-auth-card h3 {
  margin-top: 4px;
  font-size: 18px;
}

.route-account .account-auth-card p {
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.32;
}

.route-account .account-login-panel,
.route-account .account-activation-panel,
.route-account .account-signed-in {
  gap: 8px;
}

.route-account .account-activation-panel {
  padding: 10px;
  border-color: #d8e4ee;
}

.route-account .account-login-panel input,
.route-account .account-activation-panel input {
  height: 36px;
  border-radius: 6px;
  font-size: 13px;
}

.route-account .account-status {
  min-height: 34px;
  border-radius: 6px;
  padding: 8px 9px;
  font-size: 12px;
}

.route-account .app-preview {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  border: 0;
  border-radius: 0;
  background: #eef2f5;
  box-shadow: none;
}

.route-account .app-rail {
  display: none;
}

.route-account .app-main {
  min-height: 100vh;
  padding: 16px;
  background: #eef2f5;
  overflow: auto;
}

.route-account .app-main > header {
  min-height: 52px;
  margin: 0 0 12px;
  padding: 0 0 12px;
  border-bottom: 1px solid #d7e0ea;
}

.route-account .app-main h3 {
  margin-top: 3px;
  font-size: 24px;
  line-height: 1.1;
}

.route-account .app-main header .button {
  min-height: 34px;
  padding: 0 12px;
}

.private-panel-grid {
  --private-right-width: 372px;
  --private-dashboard-height: 304px;
  position: relative;
  min-height: calc(100vh - 96px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--private-right-width);
  grid-template-rows: var(--private-dashboard-height) minmax(240px, 1fr);
  grid-template-areas:
    "account dashboard"
    "account operations";
  gap: 10px;
  align-items: start;
}

/*
  The resizers, widened and calmed.

  Measured 2026-08-21 by sweeping the pointer across the column handle: in ten
  pixels of travel it passed through five elements -- content, workspace-panel,
  the 8px handle, a 2px dead sliver of bare grid, then content again. So the
  col-resize cursor and a full-width blue tint switched on, off and on with the
  smallest movement. That on-off-on is the flicker; it reads as the page
  refreshing because a block of colour appears and vanishes under the cursor.

  Two changes. The hit area covers the whole 10px grid gap plus 3px either side,
  so there is no sliver to fall into. And the affordance is a thin centred line
  on a pseudo-element with a short transition, rather than tinting the entire
  strip -- a 2px line easing in reads as a handle, a 16px block flashing on and
  off reads as a fault.
*/
.panel-resizer {
  position: absolute;
  z-index: 8;
  background: transparent;
}

.panel-resizer::after {
  content: '';
  position: absolute;
  border-radius: 999px;
  background: transparent;
  transition: background 120ms ease;
}

.panel-resizer:hover::after,
.panel-resizer.resizing::after {
  background: var(--blue);
}

.panel-resizer-column {
  top: 0;
  bottom: 0;
  /* Centred on the grid gap: 372px rail + 10px gap, minus half the 16px width. */
  left: calc(100% - var(--private-right-width) - 13px);
  width: 16px;
  cursor: col-resize;
}

.panel-resizer-column::after {
  top: 10px;
  bottom: 10px;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
}

.panel-resizer-row {
  top: calc(var(--private-dashboard-height) - 3px);
  right: 0;
  width: var(--private-right-width);
  height: 16px;
  cursor: row-resize;
}

.panel-resizer-row::after {
  left: 10px;
  right: 10px;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
}

.workspace-panel {
  min-width: 0;
  border: 1px solid #d7e0ea;
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
  display: grid;
  grid-template-rows: auto minmax(0, auto);
  align-content: start;
}

.workspace-panel-primary {
  grid-area: dashboard;
  min-height: var(--private-dashboard-height);
  max-height: var(--private-dashboard-height);
  overflow: hidden;
  grid-template-rows: auto minmax(0, 1fr);
}

.workspace-panel-side {
  grid-area: account;
  min-height: calc(100vh - 96px);
}

.workspace-panel-operations {
  grid-area: operations;
  min-height: 240px;
  overflow: hidden;
}

.workspace-panel-header {
  min-height: 34px;
  border-bottom: 1px solid #e2e9f0;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  position: relative;
}

.workspace-panel-header > div {
  min-width: 0;
  padding-inline: 30px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

.workspace-panel-header strong {
  display: inline;
  margin-top: 0;
  color: var(--emphasis);
  font-size: 13px;
  line-height: 1.15;
}

.workspace-panel-header span {
  display: inline;
  color: #627589;
  font-size: 10px;
  font-weight: 850;
  line-height: 1.2;
  text-transform: uppercase;
}

.workspace-panel-header span::before {
  content: " / ";
  color: #9aabc0;
}

.panel-control {
  position: absolute;
  right: 7px;
  width: 24px;
  height: 24px;
  border: 1px solid #cdd9e5;
  border-radius: 6px;
  background: #f8fafc;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}

.panel-control span {
  width: 10px;
  height: 10px;
  border: 2px solid #4d6278;
  border-radius: 2px;
  display: block;
}

.panel-control[aria-pressed="true"] {
  border-color: #6aaef7;
  background: #e8f3ff;
}

.private-panel-grid.panel-maximized {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "account";
}

.private-panel-grid.panel-maximized .workspace-panel,
.private-panel-grid.panel-maximized .panel-resizer {
  display: none;
}

.private-panel-grid.panel-maximized .workspace-panel.is-maximized {
  min-height: calc(100vh - 96px);
  max-height: none;
  display: grid;
  grid-area: account;
}

.route-account .basic-dashboard-panel {
  margin-top: 0;
  height: 100%;
  padding: 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  gap: 5px;
  overflow: hidden;
}

.private-empty-state {
  padding: 12px;
  display: grid;
  gap: 6px;
}

.private-empty-state strong {
  color: #172b43;
  font-size: 18px;
}

.private-empty-state span {
  max-width: 680px;
  color: #5a6f84;
  font-size: 13px;
  line-height: 1.4;
}

.basic-dashboard-panel:not([hidden]) + .private-empty-state {
  display: none;
}

.app-context-body {
  padding: 12px;
  display: grid;
  gap: 10px;
}

.context-summary {
  border: 1px solid #d8e4ee;
  border-radius: 8px;
  background: #f8fbff;
  padding: 9px 10px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
  flex-wrap: wrap;
  text-align: center;
}

.context-summary strong {
  color: var(--emphasis);
  font-size: 14px;
  line-height: 1.1;
}

.context-summary span {
  color: #5a6f84;
  font-size: 11px;
  line-height: 1.25;
  font-weight: 750;
}

.prototype-screen {
  display: grid;
  gap: 10px;
}

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

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

.prototype-card,
.prototype-table,
.prototype-flow {
  border: 1px solid #d8e4ee;
  border-radius: 8px;
  background: #fff;
  padding: 10px;
  display: grid;
  gap: 7px;
}

.prototype-card > span,
.prototype-table > span,
.prototype-flow > span {
  color: #627589;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.prototype-card strong,
.prototype-flow strong {
  color: #172b43;
  font-size: 18px;
  line-height: 1.1;
}

.prototype-card small,
.prototype-flow small {
  color: #5a6f84;
  font-size: 11px;
  line-height: 1.35;
}

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

.prototype-list div,
.prototype-row {
  min-height: 36px;
  border: 1px solid #e2e9f0;
  border-radius: 7px;
  background: #f8fbff;
  padding: 7px 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.prototype-list strong,
.prototype-row strong {
  color: #172b43;
  font-size: 12px;
  line-height: 1.2;
}

.prototype-list span,
.prototype-row span {
  color: #5a6f84;
  font-size: 10px;
  line-height: 1.25;
}

.prototype-badge {
  min-height: 22px;
  border: 1px solid #dbcafd;
  border-radius: 6px;
  background: #f4efff;
  color: var(--emphasis);
  padding: 3px 7px;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.prototype-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.prototype-toolbar,
.prototype-split,
.prototype-workbench,
.prototype-data-grid {
  display: grid;
  gap: 8px;
}

.prototype-toolbar {
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: stretch;
}

.prototype-toolbar div,
.prototype-toolbar button,
.prototype-data-grid div {
  min-width: 0;
  border: 1px solid #d8e4ee;
  border-radius: 8px;
  background: #fff;
  padding: 8px 9px;
}

.prototype-toolbar button {
  min-height: 42px;
  color: var(--blue-dark);
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.prototype-toolbar span,
.prototype-data-grid span,
.prototype-field span,
.prototype-keyvals span,
.prototype-settings-list span,
.prototype-bars span {
  display: block;
  color: #627589;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.prototype-toolbar strong,
.prototype-data-grid strong,
.prototype-field strong,
.prototype-keyvals strong,
.prototype-settings-list strong {
  display: block;
  margin-top: 4px;
  color: #172b43;
  font-size: 12px;
  line-height: 1.22;
  overflow-wrap: anywhere;
}

.prototype-split {
  grid-template-columns: minmax(0, 1fr) minmax(230px, 0.38fr);
}

.prototype-workbench {
  grid-template-columns: minmax(170px, 0.36fr) minmax(280px, 1fr) minmax(190px, 0.42fr);
}

.prototype-panel {
  min-width: 0;
  border: 1px solid #d8e4ee;
  border-radius: 8px;
  background: #fff;
  padding: 9px;
  display: grid;
  align-content: start;
  gap: 8px;
}

.prototype-panel > header {
  min-width: 0;
  min-height: 24px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
  flex-wrap: wrap;
  text-align: center;
}

.prototype-panel > header strong {
  color: var(--emphasis);
  font-size: 13px;
  line-height: 1.1;
}

.prototype-panel > header span {
  color: #627589;
  font-size: 10px;
  line-height: 1.2;
  font-weight: 850;
  text-transform: uppercase;
}

.prototype-panel > header span::before {
  content: " / ";
  color: #9aabc0;
}

.prototype-list.compact {
  gap: 5px;
}

.prototype-list.compact div,
.prototype-row {
  min-height: 34px;
  padding: 6px 7px;
}

.prototype-list.compact div {
  grid-template-columns: minmax(120px, 0.34fr) minmax(0, 1fr) auto;
  align-items: start;
}

.prototype-list.compact .prototype-badge {
  justify-self: end;
}

.prototype-navlist .prototype-list.compact div {
  grid-template-columns: minmax(0, 1fr);
}

.prototype-navlist .prototype-list.compact .prototype-badge {
  justify-self: start;
}

.prototype-field,
.prototype-keyvals div,
.prototype-settings-list label {
  min-width: 0;
  border: 1px solid #e2e9f0;
  border-radius: 7px;
  background: #f8fbff;
  padding: 8px;
}

.prototype-field-grid,
.prototype-keyvals,
.prototype-settings-list {
  display: grid;
  gap: 7px;
}

.prototype-field-grid,
.prototype-keyvals {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.prototype-inspector .prototype-keyvals,
.prototype-panel:not(.prototype-wide) .prototype-keyvals {
  grid-template-columns: 1fr;
}

.prototype-score {
  border: 1px solid #dbcafd;
  border-radius: 8px;
  background: #f8f4ff;
  padding: 10px;
  text-align: center;
}

.prototype-score strong {
  display: block;
  color: var(--emphasis);
  font-size: 32px;
  line-height: 0.95;
}

.prototype-score span,
.prototype-data-grid small {
  display: block;
  margin-top: 4px;
  color: #5a6f84;
  font-size: 10px;
  line-height: 1.25;
  font-weight: 800;
}

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

.prototype-data-grid strong {
  color: var(--emphasis);
  font-size: 17px;
}

.prototype-timeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.prototype-timeline div {
  min-height: 54px;
  border: 1px solid #e2e9f0;
  border-radius: 7px;
  background: #f8fbff;
  padding: 7px;
}

.prototype-timeline strong {
  display: inline-grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 999px;
  background: #dfeeff;
  color: var(--blue-dark);
  font-size: 10px;
}

.prototype-timeline div.done strong,
.prototype-timeline div.active strong {
  background: var(--purple);
  color: #fff;
}

.prototype-timeline span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.25;
  font-weight: 800;
}

.prototype-bars {
  display: grid;
  gap: 8px;
}

.prototype-bars div {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.prototype-bars strong {
  min-height: 22px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(129, 56, 229, 0.92) var(--bar), #edf2f7 var(--bar));
  color: #172b43;
  padding: 4px 8px;
  font-size: 10px;
  line-height: 1.2;
  text-align: right;
}

.prototype-settings-list label {
  display: grid;
  grid-template-columns: minmax(110px, 0.3fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.prototype-settings-list strong {
  margin-top: 0;
}

.prototype-settings-list em {
  min-height: 22px;
  border: 1px solid #dbcafd;
  border-radius: 6px;
  background: #f4efff;
  color: var(--emphasis);
  padding: 3px 7px;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.prototype-data-table {
  box-shadow: none;
  border-radius: 8px;
}

.prototype-data-table th,
.prototype-data-table td {
  padding: 8px 9px;
  font-size: 11px;
}

.route-account .basic-dashboard-header {
  grid-template-columns: minmax(0, 1fr) 58px;
  gap: 5px;
  align-items: center;
  min-height: 42px;
}

.route-account .basic-dashboard-header > div:first-child {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  text-align: center;
}

.route-account .basic-dashboard-header h4 {
  margin: 0;
  color: var(--emphasis);
  font-size: 12px;
  line-height: 1.1;
}

.route-account .basic-dashboard-header p {
  margin: 0;
  color: #5a6f84;
  font-size: 9px;
  line-height: 1.2;
  font-weight: 750;
}

.route-account .basic-readiness-score {
  min-height: 0;
  min-width: 0;
  border: 1px solid #c7d3df;
  border-radius: 8px;
  background: #f8fafc;
  color: #172b43;
  padding: 5px;
  align-content: start;
}

.route-account .basic-readiness-score span,
.route-account .basic-readiness-score small {
  color: #627589;
  font-size: 7px;
}

.route-account .basic-readiness-score strong {
  margin-top: 2px;
  color: var(--emphasis);
  font-size: 18px;
}

.chat-pressure-tile,
.active-session-panel {
  border: 1px solid #d8e4ee;
  border-radius: 8px;
  background: #f8fbff;
  padding: 6px;
  display: grid;
  gap: 3px;
}

.chat-pressure-tile span,
.session-pressure span,
.session-facts span {
  color: #627589;
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.chat-pressure-tile strong,
.session-pressure strong {
  color: #172b43;
  font-size: 12px;
  line-height: 1.1;
}

.chat-pressure-tile small,
.session-pressure small {
  color: #5a6f84;
  font-size: 9px;
  line-height: 1.22;
}

.route-account .basic-next-action {
  min-height: 45px;
  padding: 6px;
  border-color: #c7d3df;
  border-radius: 8px;
  background: #f8fafc;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 6px;
}

.route-account .basic-next-action span {
  font-size: 7.5px;
}

.route-account .basic-next-action strong {
  font-size: 10px;
  line-height: 1.15;
}

.route-account .basic-next-action p {
  font-size: 8.5px;
  line-height: 1.15;
}

.route-account .basic-action-link {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
  min-height: 24px;
  border: 1px solid #dbcafd;
  border-radius: 6px;
  background: #f4efff;
  color: var(--emphasis);
  padding: 5px 7px;
  font-size: 9px;
  line-height: 1;
  font-weight: 900;
  white-space: nowrap;
}

.route-account .basic-signal-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.route-account .basic-signal-grid > div,
.route-account .basic-dashboard-card,
.route-account .account-summary-strip div,
.route-account .metrics div,
.route-account .record-panel,
.route-account table,
.route-account .next-actions,
.route-account .trial-action-panel,
.route-account .communications-panel {
  border-radius: 8px;
  box-shadow: none;
}

.route-account .basic-signal-grid > div {
  min-height: 36px;
  padding: 4px 5px;
  gap: 2px;
  background: #fff;
}

.route-account .basic-signal-grid span {
  font-size: 7.5px;
  line-height: 1.1;
}

.route-account .basic-signal-grid strong {
  font-size: 12px;
}

.route-account .basic-signal-grid small {
  font-size: 7.5px;
  line-height: 1.12;
}

.route-account .basic-dashboard-grid {
  display: none;
}

.route-account .basic-dashboard-card {
  padding: 10px;
  background: #fff;
}

.route-account .basic-dashboard-card h5 {
  margin-bottom: 8px;
  font-size: 14px;
}

.route-account .basic-dashboard-card p {
  margin-top: 7px;
  font-size: 12px;
}

.route-account .basic-fact-list,
.route-account .basic-mini-metrics {
  gap: 6px;
}

.route-account .basic-fact-list div,
.route-account .basic-mini-metrics div {
  min-height: 44px;
  padding: 7px;
  border-radius: 6px;
}

.route-account .basic-fact-list strong,
.route-account .basic-mini-metrics strong {
  margin-top: 4px;
  font-size: 12px;
}

.route-account .basic-mini-metrics strong {
  font-size: 17px;
}

.route-account .basic-card-actions {
  margin-top: 8px;
}

.route-account .basic-card-actions .button {
  min-height: 32px;
  padding: 0 10px;
}

.route-account .basic-activity-list {
  gap: 6px;
}

.route-account .basic-activity-list li {
  padding: 8px;
  gap: 5px;
  border-radius: 6px;
}

.route-account .account-summary-strip,
.route-account .metrics {
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.route-account .account-summary-strip {
  padding-bottom: 0;
}

.route-account .account-summary-strip div,
.route-account .metrics div {
  min-height: 48px;
  padding: 8px 9px;
  border: 1px solid #e0e7ef;
  background: #fff;
}

.route-account .account-summary-strip strong {
  margin-top: 4px;
  font-size: 12px;
}

.route-account .metrics strong {
  margin-top: 4px;
  font-size: 18px;
}

.route-account .metrics small {
  margin-top: 3px;
  font-size: 11px;
}

.route-account .account-operations {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.workspace-panel-operations .account-operations {
  display: none;
}

.active-session-panel {
  margin: 7px;
}

.session-pressure {
  display: grid;
  gap: 3px;
}

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

.session-facts div {
  min-height: 40px;
  border: 1px solid #e2e9f0;
  border-radius: 7px;
  background: #fff;
  padding: 6px;
}

.session-facts strong {
  display: block;
  margin-top: 3px;
  color: #172b43;
  font-size: 10.5px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.route-account .account-operations summary {
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  color: #263d54;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  list-style-position: inside;
}

.route-account .account-operations summary::marker {
  color: #627589;
}

.route-account .account-operations-body {
  max-height: calc(100vh - 190px);
  overflow: auto;
  border-top: 1px solid #e2e9f0;
  padding: 10px;
}

.route-account .commerce-record-grid,
.route-account .dashboard-tables,
.route-account .trial-action-grid {
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 8px;
}

.route-account .record-panel,
.route-account .trial-action-panel,
.route-account .next-actions,
.route-account .communications-panel {
  padding: 10px;
}

.route-account .record-panel h4,
.route-account .trial-action-panel h4 {
  margin-top: 5px;
  font-size: 15px;
}

.route-account .record-panel p,
.route-account .trial-action-panel p {
  font-size: 12px;
}

.route-account th,
.route-account td {
  padding: 8px 9px;
  font-size: 12px;
}

.route-account .communications-panel {
  margin-top: 8px;
}

.commerce-record-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.82fr);
  gap: 16px;
  margin-top: 16px;
}

.record-panel {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--soft-shadow);
  padding: 18px;
  display: grid;
  gap: 14px;
  align-content: start;
}

.record-panel.action-ready {
  border-color: var(--blue);
  box-shadow: 0 16px 32px rgba(11, 120, 255, 0.12);
}

.record-panel h4 {
  margin: 10px 0 0;
  color: var(--navy);
  font-size: 22px;
  line-height: 1.05;
}

.record-panel p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.3;
}

.record-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  gap: 12px;
}

.record-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.record-form input,
.record-form select {
  width: 100%;
  height: 42px;
  border: 1px solid #cbdcf0;
  border-radius: 8px;
  background: #fff;
  color: var(--navy);
  padding: 0 12px;
  font-size: 14px;
  font-weight: 800;
}

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

.agreement-facts div {
  min-height: 78px;
  border: 1px solid #e0eaf6;
  border-radius: 10px;
  background: #f8fbff;
  padding: 12px;
}

.agreement-facts span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.agreement-facts strong {
  display: block;
  margin-top: 8px;
  color: var(--navy);
  font-size: 13px;
  line-height: 1.2;
}

.dashboard-tables,
.license-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: 16px;
  margin-top: 16px;
  min-width: 0;
}

.dashboard-tables > table {
  align-self: start;
}

table,
.next-actions,
.license-grid aside {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--soft-shadow);
}

table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
}

th,
td {
  text-align: left;
  border-bottom: 1px solid #e4edf7;
  padding: 13px 14px;
  font-size: 13px;
}

th {
  color: #597196;
  font-size: 11px;
  text-transform: uppercase;
}

td {
  color: #213b63;
}

tr:last-child td {
  border-bottom: 0;
}

.state.ready {
  background: #ebfff3;
  color: #13723a;
  border-color: #bdeacc;
}

.state.blocked,
.state.review {
  background: #f5eeff;
  color: var(--emphasis);
  border-color: #e0ceff;
}

.next-actions {
  padding: 18px;
}

.communications-panel {
  margin-top: 16px;
  padding: 18px;
  background: #fff;
}

.trial-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.trial-action-panel {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--soft-shadow);
  padding: 18px;
  display: grid;
  gap: 14px;
}

.trial-action-panel span {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  border: 1px solid #d2e4fb;
  border-radius: 6px;
  background: #ecf5ff;
  color: var(--blue-dark);
  padding: 0 8px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.trial-action-panel h4 {
  margin: 10px 0 0;
  color: var(--navy);
  font-size: 22px;
  line-height: 1.05;
}

.trial-action-panel p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.3;
}

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

.trial-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.trial-form label:first-child {
  grid-column: 1 / -1;
}

.trial-form input,
.trial-form select {
  width: 100%;
  height: 42px;
  border: 1px solid #cbdcf0;
  border-radius: 8px;
  background: #fff;
  color: var(--navy);
  padding: 0 12px;
  font-size: 14px;
  font-weight: 800;
}

.inline-status {
  min-height: 38px;
  border: 1px solid #d5e3f4;
  border-radius: 8px;
  background: #f7fbff;
  color: #31527e;
  padding: 9px 11px;
  font-size: 12px;
  line-height: 1.25;
  font-weight: 800;
}

.inline-status.success {
  border-color: #bdeacc;
  background: #ebfff3;
  color: #13723a;
}

.inline-status.error {
  border-color: #f3c5c9;
  background: #fff2f3;
  color: #a0161c;
}

.activation-link {
  border: 1px solid #d5e3f4;
  border-radius: 10px;
  background: #f7fbff;
  padding: 12px;
  display: grid;
  gap: 6px;
}

.activation-link strong {
  color: var(--navy);
  font-size: 12px;
  text-transform: uppercase;
}

.activation-link a {
  min-width: 0;
  color: var(--blue-dark);
  font-size: 12px;
  line-height: 1.25;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.activation-link small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.communications-panel table {
  margin-top: 12px;
  box-shadow: none;
}

.next-actions div {
  padding: 14px;
  margin-top: 10px;
}

.next-actions strong,
.next-actions span {
  display: block;
}

.next-actions strong {
  color: var(--navy);
  font-size: 14px;
}

.next-actions span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.license-preview {
  padding: 20px;
}

.license-grid aside {
  padding: 20px;
}

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 34px 72px;
  background: var(--navy);
  color: #dbe8ff;
}

.site-footer img {
  width: 140px;
}

.site-footer p {
  max-width: 620px;
  margin: 12px 0 0;
  color: #c9d8ee;
  font-size: 14px;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 14px;
  font-weight: 800;
}

/* Legal links are the ones a buyer's counsel and a carrier reviewer follow, so they
   need to look like links rather than decoration on the navy footer. */
.site-footer nav a {
  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  padding-bottom: 2px;
}

.site-footer nav a:hover {
  border-bottom-color: #ffffff;
}

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

  .account-auth-card {
    position: static;
  }
}

@media (max-width: 1180px) {
  .hero,
  .homepage-video-section,
  .category-section,
  .evidence-section,
  .genesis-section,
  .roi-section,
  .provision-grid,
  .onboarding-layout,
  .account-shell,
  .prompt-workspace-shell,
  .checkout-layout {
    grid-template-columns: 1fr;
  }

  .account-auth-card {
    position: static;
  }

  .basic-dashboard-grid {
    grid-template-columns: 1fr;
  }

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

  .process-grid,
  .problem-grid,
  .plan-grid,
  .wizard-grid,
  .setup-cards,
  .genesis-facts,
  .metrics,
  .license-metrics,
  .account-summary-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .usage-estimator {
    grid-template-columns: 1fr;
  }

  .prototype-toolbar,
  .prototype-data-grid,
  .prototype-timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .prototype-split,
  .prototype-workbench {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .site-header {
    grid-template-columns: auto auto;
    padding: 0 18px;
  }

  .nav-toggle {
    display: inline-flex;
    justify-self: end;
  }

  .site-nav,
  .header-actions {
    display: none;
  }

  .site-header.nav-open .site-nav,
  .site-header.nav-open .header-actions {
    display: grid;
    grid-column: 1 / -1;
    width: calc(100vw - 36px);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px;
    box-shadow: var(--shadow);
  }

  .site-header.nav-open {
    height: auto;
    padding-block: 16px;
  }

  .site-nav {
    justify-content: start;
    gap: 12px;
  }

  .hero,
  .homepage-video-section,
  .category-section,
  .problem-section,
  .proof-band,
  .prompt-wizard-section,
  .evidence-section,
  .genesis-section,
  .roi-section,
  .pricing-section,
  .checkout-section,
  .provision-section,
  .onboarding-section,
  .app-preview-section,
  .admin-section,
  .site-footer {
    padding: 44px 22px;
  }

  .app-preview-section {
    padding-top: 92px;
  }

  .hero h1 {
    font-size: 46px;
  }

  .hero-proof,
  .product-grid,
  .process-grid,
  .category-grid,
  .problem-grid,
  .wizard-grid,
  .evidence-metrics,
  .genesis-facts,
  .roi-board,
  .plan-grid,
  .buying-mode,
  .form-grid,
  .object-model,
  .setup-cards,
  .source-options,
  .metrics,
  .license-metrics,
  .account-summary-strip,
  .commerce-record-grid,
  .trial-action-grid,
  .basic-dashboard-grid,
  .basic-signal-grid,
  .dashboard-tables,
  .license-grid {
    grid-template-columns: 1fr;
  }

  .basic-dashboard-header,
  .basic-next-action {
    grid-template-columns: 1fr;
  }

  .basic-next-action .button {
    grid-column: 1;
    grid-row: auto;
    width: fit-content;
  }

  .prompt-contract-row {
    grid-template-columns: 1fr;
  }

  .video-screen {
    min-height: 260px;
    grid-template-columns: 1fr;
    padding: 24px;
  }

  .wizard-note {
    display: grid;
  }

  .artifact-flow {
    grid-template-columns: 1fr;
  }

  .artifact-flow b {
    width: 3px;
    height: 18px;
    justify-self: center;
  }

  .artifact-flow b::after {
    right: -4px;
    top: auto;
    bottom: -1px;
    border-top: 8px solid var(--blue);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 0;
  }

  .section-heading {
    display: block;
  }

  .segmented {
    margin-top: 18px;
    width: 100%;
  }

  .segmented button {
    min-width: 0;
  }

  .estimator-controls label {
    grid-template-columns: 1fr;
  }

  .stepper {
    grid-template-columns: 1fr;
  }

  .app-preview {
    grid-template-columns: 1fr;
    max-width: 100%;
    min-height: auto;
  }

  .record-form,
  .agreement-facts {
    grid-template-columns: 1fr;
  }

  .app-rail {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    min-width: 0;
    max-width: 100%;
    padding: 16px;
  }

  .app-rail img {
    display: none;
  }

  .app-main {
    padding: 18px;
  }

  .app-main header {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: start;
  }

  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
  }

  .site-footer {
    display: grid;
  }
}

@media (max-width: 820px) {
  .route-account .account-shell {
    grid-template-columns: 1fr;
  }

  .private-app-sidebar {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid #d7e0ea;
    grid-template-rows: auto auto auto auto;
  }

  .private-app-nav {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .private-app-mode {
    display: none;
  }

  .route-account .app-preview,
  .route-account .app-main {
    min-height: auto;
  }

  .private-panel-grid {
    min-height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "account"
      "dashboard"
      "operations";
  }

  .panel-resizer {
    display: none;
  }

  .workspace-panel-primary {
    max-height: none;
  }

  .private-panel-grid.panel-maximized .workspace-panel.is-maximized {
    min-height: auto;
  }

  .route-account .basic-dashboard-header,
  .route-account .basic-next-action {
    grid-template-columns: 1fr;
  }

  .route-account .basic-next-action .button {
    grid-column: 1;
    grid-row: auto;
    width: fit-content;
  }

  .route-account .basic-signal-grid,
  .route-account .account-summary-strip,
  .route-account .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .prototype-toolbar,
  .prototype-data-grid,
  .prototype-timeline,
  .prototype-field-grid,
  .prototype-keyvals,
  .prototype-settings-list label {
    grid-template-columns: 1fr;
  }

  .prototype-split,
  .prototype-workbench,
  .prototype-bars div {
    grid-template-columns: 1fr;
  }

  .route-account .basic-dashboard-grid {
    display: none;
  }

  .route-account .app-main {
    padding: 12px;
  }
}

/* ---------------------------------------------------------------------------
   Dashboard: two densities, four tabs, one drawer
   ---------------------------------------------------------------------------

   Standard 149 sections 2 and 4 for the contracts used here. The density split
   is the point: the corner panel answers "can I keep working, and if not what is
   the one next thing", and the maximized panel is the working surface. Maximizing
   used to give the same four chips more room, which is the one thing extra space
   cannot help with.
   --------------------------------------------------------------------------- */

.panel-header-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* How old the reading is. Muted because it is context, not a measurement -- but
   present, because a readiness score at forty minutes old means something else. */
[data-dashboard-asof] {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

/* Hidden until the panel is maximized. Display, not visibility: a hidden tab
   panel must not be reachable by keyboard from the summary view. */
.dashboard-full {
  display: none;
  margin-top: 10px;
}

.workspace-panel.is-maximized .dashboard-full {
  display: block;
}

.dashboard-tabs {
  display: flex;
  gap: 5px;
  align-items: center;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  margin-bottom: 10px;
}

.dashboard-tab-panel {
  display: none;
}

.dashboard-tab-panel.active {
  display: block;
}

/*
  A signal with no evidence.

  Deliberately its own tone rather than the "ready" green. An absence is not a
  pass, and colouring it green is the exact error Daleen standard 149 section 6
  exists to prevent: a zero reading as good news.
*/
.basic-signal-grid > .absent {
  background: var(--soft);
  border-color: var(--line);
}

.basic-signal-grid > .absent strong,
.basic-signal-grid > .absent small {
  color: var(--muted);
}

.basic-signal-grid > [data-signal-detail] {
  cursor: pointer;
}

.basic-signal-grid > [data-signal-detail]:hover {
  border-color: var(--blue);
}

/* ---- The drawer that replaced the JSON pane ---- */

.detail-drawer {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(380px, 100%);
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: var(--white);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow);
  overflow-y: auto;
}

.detail-drawer header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.detail-drawer header span {
  display: block;
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.detail-drawer header strong {
  display: block;
  margin-top: 3px;
  color: var(--navy);
  font-size: 14px;
}

.drawer-fields {
  display: grid;
  gap: 7px;
}

.drawer-fields div {
  display: grid;
  gap: 2px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--soft);
}

.drawer-fields span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

/* Wraps rather than ellipsizes: a drawer exists to show the whole value, which
   is the job the table cell handed over. */
.drawer-fields strong {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.detail-drawer footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

[data-drawer-copy-state] {
  color: var(--green);
  font-size: 10px;
  font-weight: 700;
}

/* The panel is the drawer's containing block. Without this the drawer would
   position against the viewport and cover the left navigation. */
.workspace-panel {
  position: relative;
}

@media (max-width: 720px) {
  .detail-drawer {
    width: 100%;
    border-left: 0;
  }
}

/*
  Compact rows stop being three columns when there is no room for three.

  `.prototype-list.compact div` is a 3-column grid with a 120px minimum on the
  label and `auto` on the badge. Inside the editor panel -- one of three columns
  in the private grid, so roughly 280px wide -- that leaves about 50px for the
  value, and a sentence renders one word per line. Visible on /app/prompt under
  Acceptance criteria, Validation and Handoff; 23 rows share the shape.

  A container query rather than a media query, because the panel is resizable and
  maximizable: its width has no fixed relationship to the viewport's, so the
  breakpoint has to be about the container that actually squeezes the text.
*/
.prototype-list.compact {
  container-type: inline-size;
}

@container (max-width: 420px) {
  .prototype-list.compact div {
    /* Label over value, badge staying on the right across both rows. */
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .prototype-list.compact div > span {
    grid-column: 1;
    grid-row: 2;
  }

  .prototype-list.compact .prototype-badge {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }
}

/* ---------------------------------------------------------------------------
   /app/prompt: the interim prompt panel
   ---------------------------------------------------------------------------
   Standard 149 for the contracts. Interim by intent -- Patrick's prompting app
   replaces this -- so it borrows .button, .panel tone and the status colors
   rather than introducing a vocabulary that has to be retired with it.
   --------------------------------------------------------------------------- */

.app-prompt {
  display: grid;
  gap: 12px;
}

.app-prompt-bar {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.app-prompt label {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.app-prompt input,
.app-prompt select,
.app-prompt textarea {
  min-width: 180px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  text-transform: none;
}

.app-prompt textarea {
  width: 100%;
  resize: vertical;
}

.app-prompt-status {
  margin: 0;
  min-height: 15px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

/* Status tones reuse the canonical text colors so a failure here reads the same
   as a failure anywhere else in the product. */
.app-prompt-status.ok { color: var(--green); }
.app-prompt-status.warn { color: var(--amber); }
.app-prompt-status.error { color: var(--red); }

.app-prompt-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 12px;
}

.app-prompt-panel {
  display: grid;
  gap: 9px;
  align-content: start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--white);
}

.app-prompt-panel h4 {
  margin: 0;
  color: var(--navy);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.app-prompt-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) auto auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  padding: 7px 8px;
  margin-bottom: 5px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--soft);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.app-prompt-row:hover { border-color: var(--blue); }
.app-prompt-row strong { color: var(--emphasis); font-size: 12px; }
.app-prompt-row span,
.app-prompt-row em { color: var(--muted); font-size: 10px; font-style: normal; }

.app-prompt-field {
  display: grid;
  gap: 2px;
}

.app-prompt-field span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.app-prompt-field strong {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.35;
}

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

.app-prompt-cols span {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.app-prompt-cols ul {
  margin: 0;
  padding-left: 15px;
  color: var(--ink);
  font-size: 11px;
  line-height: 1.4;
}

.app-prompt-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.app-prompt-panel footer {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.app-prompt-panel footer span,
.app-prompt-note {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

/* Says "not recorded" rather than rendering an empty bullet, so a gap in a
   contract is visible as a gap. */
.app-prompt-empty {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-style: italic;
}

@media (max-width: 900px) {
  .app-prompt-grid,
  .app-prompt-cols {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------------------------------------------------------------------------
   /app/analytics: the reports surface
   ---------------------------------------------------------------------------
   Standard 144 and 149. Reuses .button, .badge and the .app-prompt shell rather
   than introducing a third vocabulary, and the report itself renders in an iframe
   because it arrives as a self-contained document with its own print chrome --
   injecting it into this page would put two stylesheets in one scope.
   --------------------------------------------------------------------------- */

.app-report {
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--white);
  margin-bottom: 9px;
}

.app-report header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.app-report header strong {
  display: block;
  color: var(--navy);
  font-size: 13px;
}

/* The question the report answers, which is what a person chooses a report by. */
.app-report header span {
  display: block;
  margin-top: 2px;
  color: var(--emphasis);
  font-size: 11px;
  font-weight: 700;
}

.app-report p {
  margin: 0;
  color: var(--ink);
  font-size: 11px;
  line-height: 1.45;
}

/* What must exist for the report to have anything to say. Stated up front so a
   run that returns nothing is explainable before it happens. */
.app-report-requires {
  color: var(--muted) !important;
}

.app-report-requires span {
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.app-report-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding-top: 3px;
}

.app-report-output {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--white);
}

.app-report-output header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.app-report-output header strong {
  display: block;
  color: var(--navy);
  font-size: 13px;
}

/* The deterministic filename, per standard 144 section 4. Shown because it is
   what a saved, printed or emailed copy will be called. */
.app-report-output header span {
  display: block;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
}

.app-report-subject {
  margin: 0;
  color: var(--amber);
  font-size: 11px;
  line-height: 1.45;
}

.app-report-output iframe {
  width: 100%;
  height: 62vh;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--white);
}

/* ---------------------------------------------------------------------------
   /app/prompt: the Prompt Contract builder
   ---------------------------------------------------------------------------
   Laid out to the component guidance in doc 08 section 12, which is what
   Patrick's Figma build is specified against. Contracts rail on the left,
   builder in the centre, sticky actions at the foot.

   The gap lists are deliberately loud. That document's one hard rule is "do not
   hide task-profile gaps inside a generic warning -- the missing data/scope
   dependency is the core value of this UI", so a gap gets its own line and its
   own colour rather than rolling up into a count.
   --------------------------------------------------------------------------- */

.pw-shell {
  display: grid;
  grid-template-columns: minmax(170px, 0.24fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.pw-list {
  display: grid;
  gap: 5px;
  align-content: start;
}

.pw-contract {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 8px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--white);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.pw-contract.active { border-color: var(--blue); background: var(--soft-2); }
.pw-contract:hover { border-color: var(--blue); }
.pw-contract strong { color: var(--emphasis); font-size: 11px; }
.pw-contract span { grid-column: 1; color: var(--muted); font-size: 10px; }
.pw-contract em {
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--navy);
  font-size: 15px;
  font-style: normal;
  font-weight: 900;
}

.pw-builder {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--white);
}

.pw-builder h5 {
  margin: 0 0 6px;
  color: var(--navy);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pw-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
}

.pw-head span { display: block; color: var(--muted); font-size: 9px; font-weight: 900; text-transform: uppercase; }
.pw-head strong { display: block; color: var(--navy); font-size: 15px; }

.pw-worktype select { min-width: 220px; }

.pw-profile {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
}

.pw-profile p { margin: 0 0 8px; color: var(--ink); font-size: 11px; line-height: 1.45; }

.pw-profile-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.pw-profile-meta span { display: block; color: var(--muted); font-size: 9px; font-weight: 900; text-transform: uppercase; }
.pw-profile-meta strong { color: var(--ink); font-size: 12px; }

/* The section completion rail: Intent through Review. */
.pw-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 5px;
}

.pw-rail-step {
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--line);
  border-radius: 0 0 7px 7px;
  background: var(--soft);
}

.pw-rail-step span { display: block; color: var(--ink); font-size: 10px; font-weight: 700; }
.pw-rail-step em { color: var(--muted); font-size: 9px; font-style: normal; text-transform: uppercase; }
.pw-rail-step.complete { border-top-color: var(--green); background: var(--green-tint); }
.pw-rail-step.partial { border-top-color: var(--amber); background: var(--amber-tint); }
.pw-rail-step.missing { border-top-color: var(--red); background: var(--red-tint); }
/* Unknown is not a pass. A section the server did not score keeps the neutral
   tone rather than borrowing the complete one. */
.pw-rail-step.unknown { border-top-color: var(--line); }

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

.pw-req-group { margin-bottom: 10px; }

.pw-req {
  padding: 8px 9px;
  margin-bottom: 6px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--soft);
}

.pw-req-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pw-req-head strong { color: var(--ink); font-size: 11px; }
.pw-req-meta { margin-top: 3px; color: var(--muted); font-size: 10px; }

/* A named gap, which is the point of the screen. */
.pw-gaps {
  margin: 6px 0 0;
  padding-left: 16px;
  color: var(--red);
  font-size: 10px;
  line-height: 1.45;
}

.pw-profile .pw-gaps { color: var(--muted); }

.pw-readiness { padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); }

.pw-score { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.pw-score strong { color: var(--navy); font-size: 30px; line-height: 1; }
.pw-score span { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; }

.pw-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.pw-table th {
  padding: 5px 7px;
  border-bottom: 1px solid var(--grid);
  background: var(--soft-2);
  color: var(--navy);
  font-size: 9px;
  text-align: left;
  text-transform: uppercase;
}
.pw-table td { padding: 5px 7px; border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: top; }
.pw-table .long-cell { max-width: 260px; }

.pw-commands { margin: 0; padding-left: 16px; }
.pw-commands code { color: var(--blue-dark); font-family: var(--font-mono); font-size: 10px; }

/* Sticky, per the guidance: the three actions stay reachable however long the
   contract gets. */
.pw-footer {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 9px 0 2px;
  border-top: 1px solid var(--line);
  background: var(--white);
}

.pw-packet {
  max-height: 260px;
  overflow: auto;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--soft);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 10px;
}

@media (max-width: 1000px) {
  .pw-shell, .pw-split { grid-template-columns: minmax(0, 1fr); }
}


/* ---------------------------------------------------------------------------
   Collapsing the side menu
   ---------------------------------------------------------------------------
   James: "we need a collapse menu button so we can hide the side menu when it is
   not needed to use the entire screen for a workspace."

   The state lives on <body> and is persisted, because the nav links are real
   anchors -- every /app/* click is a full page load, so a collapse that lived in
   memory would spring back open on each navigation. It is also applied before
   first paint, so the sidebar does not flash open and then vanish.
   --------------------------------------------------------------------------- */

.private-app-collapse {
  justify-self: end;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--white);
  color: var(--blue-dark);
  font: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.private-app-collapse:hover { border-color: var(--blue); }

body[data-nav-collapsed="true"] .private-app-sidebar { display: none; }

/* The workspace takes the whole width. Both selectors are needed: the shell
   carries .account-shell for its grid and .private-app-shell for identity. */
body[data-nav-collapsed="true"] .private-app-shell {
  grid-template-columns: minmax(0, 1fr);
}

/* The way back. Fixed rather than in flow, so restoring the menu never depends
   on where the page is scrolled. */
.private-app-restore {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 40;
  width: 34px;
  height: 34px;
  display: none;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  color: var(--blue-dark);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--soft-shadow);
}

body[data-nav-collapsed="true"] .private-app-restore { display: grid; }
.private-app-restore:hover { border-color: var(--blue); }

/* Brand and collapse control share the sidebar's first row. */
.private-app-brand-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

/* ---- prompt contract editor ----
   Thirty-one fields is a lot of form, so it is grouped and collapsible rather
   than one column: an operator working on scope should not scroll past current
   state to reach acceptance criteria. Three groups open by default -- identity,
   intent and scope -- because that is the order a contract is actually written
   in. */

.pw-group {
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--white);
  margin-bottom: 8px;
}

.pw-group > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 11px;
  color: var(--navy);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.pw-group > summary em {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-style: normal;
}

.pw-group[open] > summary { border-bottom: 1px solid var(--line); }

.pw-group-note {
  margin: 8px 11px 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.45;
}

.pw-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 9px;
  padding: 10px 11px 12px;
}

/* Prose and lists get the full width: a one-per-line list in a 240px column is
   unreadable at exactly the moment it matters. */
.pw-field-wide { grid-column: 1 / -1; }

.pw-field { display: grid; gap: 3px; }

.pw-field > span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* The count of items already in a list, so a full section is visible without
   opening it. */
.pw-field > span em {
  color: var(--green);
  font-family: var(--font-mono);
  font-style: normal;
}

.pw-field input,
.pw-field select,
.pw-field textarea {
  width: 100%;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
  text-transform: none;
}

.pw-field textarea { resize: vertical; font-family: var(--font-mono); font-size: 12px; line-height: 1.45; }
.pw-field input:focus-visible,
.pw-field select:focus-visible,
.pw-field textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

/*
  A roadmap bullet on a pricing card.

  Deliberately quieter than a shipped feature and deliberately still present. A
  buyer weighing a plan needs to see what is coming; they must not be able to
  mistake it for what is here. Same list, different weight -- the distinction is
  carried by the "Planned:" prefix as well as the styling, so it survives a
  stylesheet failing to load.
*/
.plan-card li.roadmap {
  color: var(--aide-muted, #55627a);
  font-style: italic;
}
.plan-card li.roadmap::marker { color: var(--aide-muted, #55627a); }

/* A short note under the plan cards, for terms that apply to every tier. */
.pricing-note {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--aide-muted, #55627a);
  max-width: 62ch;
  margin: 1.25rem auto 1rem;
  text-align: center;
}