/* BIRTH client-experience patterns.
 *
 * One reusable content model across the client-facing pages:
 *   .cx-need     "You may need this when"  - recognition
 *   .cx-build    "What we could build"     - concrete deliverables
 *   .cx-receive  "What you receive"        - outputs and handover
 *   .cx-depth    "Technical depth"         - progressive disclosure
 *   .cx-demo     one meaningful interaction with a visible consequence
 *
 * Uses the existing BIRTH tokens (--line, --dim2, --cyan, --mono ...) so this
 * is the same design language, not a second one.
 */

/* ── section rhythm ─────────────────────────────────────────────────────── */

.cx-head {
  max-width: 62ch;
}
.cx-head h2 {
  margin: 12px 0 0;
  color: var(--white);
  font-size: clamp(1.6rem, 2.5vw, 2.3rem);
  line-height: 1.1;
  letter-spacing: -.03em;
}
.cx-head p {
  margin: .9rem 0 0;
  max-width: 58ch;
  color: var(--dim2);
  font-size: 15px;
  line-height: 1.65;
}

/* ── recognition: "you may need this when" ──────────────────────────────── */

.cx-need {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 1.8rem;
  padding: 0;
  list-style: none;
}
.cx-need li {
  display: flex;
  gap: 11px;
  padding: 15px 17px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: linear-gradient(160deg, rgba(13, 22, 34, .72), rgba(6, 11, 18, .8));
  color: #dbe6f3;
  font-size: 14.5px;
  line-height: 1.5;
}
.cx-need li::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: 7px;
  border-radius: 99px;
  background: var(--cyan);
  opacity: .75;
}

/* ── what we could build ────────────────────────────────────────────────── */

.cx-build {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  margin-top: 1.8rem;
  padding: 0;
  list-style: none;
}
.cx-build li {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(9, 15, 24, .6);
}
.cx-build b {
  display: block;
  color: #eaf2fb;
  font-size: 15px;
  font-weight: 640;
  letter-spacing: -.01em;
}
.cx-build span {
  display: block;
  margin-top: 5px;
  color: var(--dim2);
  font-size: 13px;
  line-height: 1.5;
}

/* ── what you receive ───────────────────────────────────────────────────── */

.cx-receive {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0 34px;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
}
.cx-receive li {
  display: flex;
  gap: 10px;
  padding: 11px 0;
  border-top: 1px solid rgba(151, 174, 206, .13);
  color: #dbe6f3;
  font-size: 14.5px;
  line-height: 1.5;
}
.cx-receive li::before {
  content: "\2713";
  color: var(--cyan);
  font-size: 13px;
  line-height: 1.6;
}

/* ── technical depth: progressive disclosure ────────────────────────────── */

.cx-depth {
  margin-top: 2rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(8, 13, 21, .6);
}
.cx-depth > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  color: #e2ecf7;
  cursor: pointer;
  font: 650 12px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  list-style: none;
}
.cx-depth > summary::-webkit-details-marker { display: none; }
.cx-depth > summary::after {
  content: "+";
  color: var(--cyan);
  font-size: 16px;
  transition: transform .18s var(--ease);
}
.cx-depth[open] > summary::after { transform: rotate(45deg); }
.cx-depth > summary:hover { color: #fff; }
.cx-depth-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px 28px;
  padding: 4px 18px 20px;
  border-top: 1px solid rgba(151, 174, 206, .12);
}
/* these sit under an h2, so they are h3; the h4 form is kept so the rule
   cannot break if a page is converted later than the others */
.cx-depth-body h3,
.cx-depth-body h4 {
  margin: 14px 0 7px;
  color: var(--cyan);
  font: 650 10px/1 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.cx-depth-body p {
  margin: 0;
  color: var(--dim2);
  font-size: 13.5px;
  line-height: 1.6;
}

/* ── the demonstration shell ────────────────────────────────────────────── */

.cx-demo {
  margin-top: 1.9rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(12, 20, 31, .9), rgba(6, 10, 17, .95));
  overflow: hidden;
}
.cx-demo-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(151, 174, 206, .13);
}
.cx-demo-controls button {
  min-height: 44px;
  padding: 10px 15px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: rgba(10, 17, 27, .8);
  color: var(--dim2);
  font: 600 13.5px/1 var(--sans);
  cursor: pointer;
  transition: border-color .16s, color .16s, background-color .16s;
}
.cx-demo-controls button:hover:not(:disabled) { color: #fff; border-color: rgba(60, 233, 255, .4); }
.cx-demo-controls button[aria-pressed="true"] {
  border-color: rgba(60, 233, 255, .55);
  background: rgba(60, 233, 255, .1);
  color: #fff;
}
.cx-demo-controls button:disabled { opacity: .42; cursor: default; }
.cx-demo-controls button.is-done { color: var(--cyan); border-color: rgba(60, 233, 255, .3); }
.cx-demo-controls button:focus-visible,
.cx-demo a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.cx-demo-stage { padding: 18px 16px; }
.cx-demo-panel[hidden] { display: none; }
.cx-demo-panel.is-entering { animation: cx-in .28s var(--ease) both; }
@keyframes cx-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.cx-demo-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-top: 1px solid rgba(151, 174, 206, .13);
  background: rgba(5, 9, 15, .5);
}
.cx-demo-caption {
  margin: 0;
  max-width: 62ch;
  color: var(--dim2);
  font-size: 13.5px;
  line-height: 1.55;
}
.cx-demo-foot a { color: var(--cyan); font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.cx-demo-foot a:hover { text-decoration: underline; }

/* ── the illustrative surface inside a demo ─────────────────────────────── */

.cx-surface {
  border: 1px solid rgba(155, 180, 213, .18);
  border-radius: 10px;
  background: #070d16;
  overflow: hidden;
}
.cx-surface-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
  border-bottom: 1px solid rgba(155, 180, 213, .13);
  background: rgba(11, 18, 29, .9);
  color: var(--dim2);
  font: 650 10px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.cx-surface-bar b { color: #e6eef8; font-weight: 700; }
.cx-surface-bar .cx-surface-role {
  margin-left: auto;
  color: rgba(151, 174, 206, .72);
  letter-spacing: .08em;
  text-transform: none;
  font-weight: 600;
}
.cx-surface-body { padding: 15px 14px; }

.cx-rowset { display: grid; gap: 8px; }
.cx-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 11px 13px;
  border: 1px solid rgba(155, 180, 213, .13);
  border-radius: 8px;
  background: rgba(11, 17, 27, .75);
}
.cx-row b { display: block; color: #e8f0f8; font-size: 13.5px; font-weight: 620; }
.cx-row span { display: block; margin-top: 3px; color: var(--dim2); font-size: 12px; }

.cx-state {
  padding: 5px 10px;
  border: 1px solid rgba(151, 174, 206, .28);
  border-radius: 99px;
  color: var(--dim2);
  font: 650 10px/1 var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cx-state--wait { border-color: rgba(233, 190, 90, .45); color: #e9be5a; }
.cx-state--good { border-color: rgba(94, 226, 165, .45); color: #5ee2a5; }
.cx-state--stop { border-color: rgba(255, 143, 120, .5); color: #ff8f78; }
.cx-state--live { border-color: rgba(60, 233, 255, .5); color: var(--cyan); }

/* audit trail: the consequence of an action, appended over time */
.cx-trail {
  margin: 13px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(151, 174, 206, .13);
}
.cx-trail:empty { display: none; }
.cx-trail-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 12px;
  padding: 9px 2px;
  border-bottom: 1px solid rgba(151, 174, 206, .08);
}
.cx-trail-row.is-entering { animation: cx-in .24s var(--ease) both; }
.cx-trail-actor { color: var(--cyan); font: 650 9.5px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.cx-trail-text { color: var(--dim2); font-size: 13px; line-height: 1.5; }

.cx-outcome {
  display: flex;
  gap: 10px;
  margin: 14px 0 0;
  padding: 12px 14px;
  border-left: 2px solid var(--cyan);
  border-radius: 0 8px 8px 0;
  background: rgba(60, 233, 255, .05);
  color: #dfeaf6;
  font-size: 13.5px;
  line-height: 1.55;
}
.cx-outcome b { color: var(--cyan); font: 650 9.5px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }

/* ── honest labelling for illustrative material ─────────────────────────── */

.cx-illustrative {
  margin: 10px 0 0;
  color: rgba(151, 174, 206, .8);
  font: 600 10.5px/1.5 var(--mono);
  letter-spacing: .06em;
}

@media (prefers-reduced-motion: reduce) {
  .cx-demo-panel.is-entering,
  .cx-trail-row.is-entering { animation: none; }
}

@media (max-width: 620px) {
  .cx-demo-controls { padding: 12px; }
  .cx-demo-controls button { flex: 1 1 auto; }
  .cx-trail-row { grid-template-columns: 1fr; gap: 2px; }
  .cx-demo-foot { flex-direction: column; align-items: flex-start; }
}

/* ── the services selector ──────────────────────────────────────────────── */

.cx-selector {
  margin-top: 2rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(12, 20, 31, .9), rgba(6, 10, 17, .95));
  overflow: hidden;
}
.cx-selector-controls { gap: 8px; }
.cx-selector-stage { padding: 22px 20px; }

.cx-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 3.5vw, 3rem);
  align-items: start;
}
.cx-panel[hidden] { display: none; }
.cx-panel.is-entering { animation: cx-in .28s var(--ease) both; }

.cx-panel-kick {
  margin: 0 0 .55rem;
  color: var(--cyan);
  font: 650 10px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.cx-panel-kick + .cx-build,
.cx-panel-kick + .cx-panel-change { margin-top: 0; }
.cx-panel-problem {
  margin: 0 0 1.5rem;
  padding-left: .9rem;
  border-left: 2px solid rgba(60, 233, 255, .34);
  color: #e2ecf7;
  font-size: 16px;
  font-style: italic;
  line-height: 1.55;
}
.cx-panel-copy .cx-build {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-bottom: 1.5rem;
}
.cx-panel-copy .cx-build li { padding: 13px 14px; }
.cx-panel-copy .cx-build b { font-size: 13.5px; }
.cx-panel-copy .cx-build span { font-size: 12.5px; }
.cx-panel-change {
  margin: 0;
  color: #dbe6f3;
  font-size: 15px;
  line-height: 1.6;
}
.cx-panel-visual .cx-row { grid-template-columns: minmax(0, 1fr) auto; }

@media (prefers-reduced-motion: reduce) { .cx-panel.is-entering { animation: none; } }

@media (max-width: 860px) {
  .cx-panel { grid-template-columns: 1fr; gap: 1.6rem; }
  .cx-panel-visual { order: -1; }
}
@media (max-width: 620px) {
  .cx-selector-stage { padding: 16px 14px; }
  .cx-selector-controls button { flex: 1 1 100%; text-align: left; }
}

/* ── the guided enquiry ─────────────────────────────────────────────────── */

.cx-stepnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 1.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.cx-stepdots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: cxstep;
}
.cx-stepdots li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(151, 174, 206, .62);
  font: 650 10.5px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.cx-stepdots li::before {
  counter-increment: cxstep;
  content: counter(cxstep, decimal-leading-zero);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(151, 174, 206, .28);
  border-radius: 99px;
  font-size: 9.5px;
}
.cx-stepdots li[data-state="now"] { color: #fff; }
.cx-stepdots li[data-state="now"]::before {
  border-color: rgba(60, 233, 255, .6);
  background: rgba(60, 233, 255, .12);
  color: var(--cyan);
}
.cx-stepdots li[data-state="done"] { color: var(--cyan); }
.cx-stepdots li[data-state="done"]::before {
  border-color: rgba(60, 233, 255, .38);
  content: "\2713";
  color: var(--cyan);
}
.cx-stepbtns { display: flex; gap: 10px; }
.cx-stepbtns .btn { min-height: 44px; }

.cx-step-review { margin-top: 1.6rem; }
.cx-step-kick {
  margin: 0;
  color: var(--cyan);
  font: 650 10px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.cx-step-note { margin: .7rem 0 0; color: var(--dim2); font-size: 14px; line-height: 1.6; }
.cx-review-list {
  display: grid;
  grid-template-columns: minmax(140px, auto) minmax(0, 1fr);
  gap: 0;
  margin: 1.2rem 0 0;
}
.cx-review-list dt {
  padding: 11px 0;
  border-top: 1px solid rgba(151, 174, 206, .13);
  color: var(--dim2);
  font: 650 10px/1.5 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.cx-review-list dd {
  margin: 0;
  padding: 11px 0 11px 18px;
  border-top: 1px solid rgba(151, 174, 206, .13);
  color: #e2ecf7;
  font-size: 14px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

@media (max-width: 620px) {
  .cx-stepnav { flex-direction: column; align-items: stretch; }
  .cx-stepbtns .btn { flex: 1; }
  .cx-review-list { grid-template-columns: 1fr; }
  .cx-review-list dd { padding-left: 0; border-top: 0; padding-top: 0; }
}

/* ── demonstrations without JavaScript ──────────────────────────────────────
 * The controls cannot do anything without JS, so they are not shown at all
 * rather than left looking clickable. What remains is the static version of
 * the same lesson: the task, the full state progression, and the meaning.
 */
.cx-outcome--static,
.cx-nojs-only { display: none; }

@media (scripting: none) {
  .cx-demo-controls { display: none; }
  .cx-outcome--live { display: none; }
  .cx-outcome--static { display: flex; }
  .cx-nojs-only { display: block; }
  /* the seeded row state is a starting point that can no longer be advanced,
     so show the settled one instead */
  .cx-demo [data-cx-state] { display: none; }
  .cx-state--settled { display: inline-block; }
}
.cx-state--settled { display: none; }

.cx-nojs-only {
  margin: 0 0 12px;
  padding: 10px 13px;
  border-left: 2px solid rgba(151, 174, 206, .3);
  color: var(--dim2);
  font-size: 13px;
  line-height: 1.55;
}

/* the optional routing disclosure in the enquiry */
.cx-route-hint {
  margin-top: 1.4rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(8, 13, 21, .5);
}
.cx-route-hint > summary {
  padding: 13px 15px;
  color: var(--dim2);
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
}
.cx-route-hint > summary:hover { color: #fff; }
.cx-route-hint > summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.cx-route-hint > .project-intents { padding: 0 15px 15px; }

.cx-nojs-note {
  display: none;
  margin: 0 0 1rem;
  padding: 12px 14px;
  border-left: 2px solid rgba(233, 190, 90, .5);
  color: var(--dim2);
  font-size: 13.5px;
  line-height: 1.6;
}
.cx-nojs-note a { color: var(--cyan); }
@media (scripting: none) {
  .cx-nojs-note { display: block; }
  .start-actions { display: none; }
}

/* A switch demo without JS shows every mode stacked rather than one dead tab.
   birth-web.css carries a global [hidden]{display:none!important}, so these
   two overrides have to match it to win. */
@media (scripting: none) {
  .cx-demo-panel[hidden] { display: block !important; }
  .cx-selector .cx-panel[hidden] { display: grid !important; }
  .cx-demo-stage > .cx-demo-panel + .cx-demo-panel,
  .cx-selector-stage > .cx-panel + .cx-panel {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(151, 174, 206, .13);
  }
}

/* ── study cards explain the image ──────────────────────────────────────── */

.cx-study-type {
  margin: 0;
  color: var(--cyan);
  font: 650 9px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.cx-study-name {
  margin: 8px 0 12px;
  color: #f0f5fc;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: -.02em;
}
/* the fictional product name is a quiet label, not the thing to decode */
.cx-study-name span {
  color: rgba(151, 174, 206, .62);
  font: 600 9.5px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.cx-study-facts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 12px;
  margin: 0;
}
.cx-study-facts dt {
  padding: 6px 0;
  color: rgba(151, 174, 206, .7);
  font: 650 8.5px/1.6 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.cx-study-facts dd {
  margin: 0;
  padding: 6px 0;
  color: var(--dim2);
  font-size: 12.5px;
  line-height: 1.5;
}
.cx-study-caps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 13px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(151, 174, 206, .13);
}
.cx-study-caps > span {
  color: rgba(151, 174, 206, .7);
  font: 650 8.5px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.cx-study-caps a {
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 99px;
  color: var(--dim2);
  font-size: 11.5px;
  line-height: 1;
  text-decoration: none;
  transition: border-color .16s, color .16s;
}
.cx-study-caps a:hover,
.cx-study-caps a:focus-visible { border-color: rgba(60, 233, 255, .42); color: #fff; }

@media (max-width: 520px) {
  .cx-study-facts { grid-template-columns: 1fr; gap: 0; }
  .cx-study-facts dd { padding-top: 0; padding-bottom: 10px; }
}

/* ── the five-stage public journey ──────────────────────────────────────── */

.cx-journey {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin: 1.9rem 0 0;
  padding: 0;
  list-style: none;
}
.cx-journey li {
  display: flex;
  gap: 12px;
  padding: 16px 17px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: linear-gradient(160deg, rgba(13, 22, 34, .72), rgba(6, 11, 18, .8));
}
.cx-journey-n {
  flex: 0 0 auto;
  color: var(--cyan);
  font: 650 10px/1.5 var(--mono);
  letter-spacing: .1em;
}
.cx-journey b { display: block; color: #eaf2fb; font-size: 14px; font-weight: 640; }
.cx-journey span + span,
.cx-journey div > span { display: block; margin-top: 5px; color: var(--dim2); font-size: 12.5px; line-height: 1.5; }

/* phase detail inside the timeline: label, then the plain statement */
.phases .phase ul li b,
.how-timeline-detail li b {
  display: block;
  color: var(--cyan);
  font: 650 9px/1.6 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ── About: three identities, stated separately ─────────────────────────── */

.cx-identity {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin: 2.2rem 0 0;
  padding: 0;
  list-style: none;
}
.cx-identity li {
  padding: 20px 20px 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(13, 22, 34, .78), rgba(6, 11, 18, .86));
}
.cx-identity-kick {
  margin: 0;
  color: var(--cyan);
  font: 650 9.5px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.cx-identity h2 {
  margin: 10px 0 6px;
  color: #f2f7fd;
  font-size: 21px;
  line-height: 1.15;
  letter-spacing: -.025em;
}
.cx-identity-role {
  margin: 0 0 10px;
  color: #dbe6f3;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
}
.cx-identity li > p:last-child {
  margin: 0;
  color: var(--dim2);
  font-size: 13px;
  line-height: 1.6;
}
.cx-identity-line {
  margin: 1.6rem 0 0;
  padding-left: .9rem;
  max-width: 62ch;
  border-left: 2px solid rgba(60, 233, 255, .34);
  color: #e2ecf7;
  font-size: 15.5px;
  line-height: 1.6;
}

/* ── HOME hero: a 3-up segmented control on small screens ───────────────────
 * All three modes stay visible and equally weighted at 390px. No horizontal
 * scrolling, no hidden third option.
 */
@media (max-width: 620px) {
  .hero-cx-demo .cx-demo-controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 12px;
  }
  .hero-cx-demo .cx-demo-controls button {
    flex: none;
    min-height: 48px;
    padding: 8px 6px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.25;
    text-align: center;
    hyphens: auto;
  }
  .hero-cx-demo .cx-demo-stage { padding: 14px 12px; }
  .hero-cx-demo .cx-row { padding: 10px 11px; }
  .hero-cx-demo .cx-row b { font-size: 12.5px; }
}

/* ── how BIRTH operates: horizons and the permanent boundary ────────────── */

.cx-horizons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 1.9rem;
}
.cx-horizon {
  padding: 18px 19px 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(13, 22, 34, .74), rgba(6, 11, 18, .84));
}
.cx-horizon-kick { margin: 0 0 14px; }
.cx-horizon dl { margin: 0; }
.cx-horizon dt {
  margin-top: 12px;
  color: #e8f0f8;
  font-size: 13.5px;
  font-weight: 640;
}
.cx-horizon dt:first-of-type { margin-top: 0; }
.cx-horizon dd {
  margin: 4px 0 0;
  color: var(--dim2);
  font-size: 12.5px;
  line-height: 1.55;
}
.cx-boundary {
  display: block;
  margin: 1.4rem 0 0;
  padding: 14px 16px;
  border-left: 2px solid var(--cyan);
  border-radius: 0 10px 10px 0;
  background: rgba(60, 233, 255, .05);
  color: #dfeaf6;
  font-size: 14px;
  line-height: 1.6;
}
.cx-boundary b {
  display: block;
  margin-bottom: 5px;
  color: var(--cyan);
  font: 650 9.5px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.cx-depth-note {
  margin: 0 0 16px;
  color: var(--dim2);
  font-size: 13px;
  line-height: 1.6;
}
.cx-depth-loop { padding: 4px 18px 20px; border-top: 1px solid rgba(151, 174, 206, .12); }

/* ── capabilities: disciplines, client label first ──────────────────────── */

.cx-disciplines {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
  margin: 1.9rem 0 0;
  padding: 0;
  list-style: none;
}
.cx-disciplines li {
  display: flex;
  flex-direction: column;
  padding: 17px 18px 18px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(9, 15, 24, .6);
}
.cx-disciplines b { color: #eaf2fb; font-size: 15px; font-weight: 640; letter-spacing: -.01em; }
.cx-disciplines > li > span {
  margin-top: 5px;
  color: var(--dim2);
  font-size: 13px;
  line-height: 1.55;
}
.cx-disciplines .cx-tech {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid rgba(151, 174, 206, .13);
}
.cx-disciplines .cx-tech i {
  padding: 4px 8px;
  border: 1px solid rgba(151, 174, 206, .2);
  border-radius: 99px;
  color: rgba(151, 174, 206, .82);
  font: 600 10.5px/1 var(--mono);
  font-style: normal;
  letter-spacing: .04em;
}
.cx-disciplines a { margin-top: 13px; color: var(--cyan); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.cx-disciplines a:hover { text-decoration: underline; }

/* ── contact: three routes, scannable ───────────────────────────────────── */

.cx-routes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cx-routes li {
  display: flex;
  flex-direction: column;
  padding: 22px 22px 24px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: linear-gradient(160deg, rgba(13, 22, 34, .78), rgba(6, 11, 18, .86));
}
.cx-routes-when {
  margin: 0;
  color: var(--cyan);
  font: 650 9.5px/1 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.cx-routes h2 {
  margin: 11px 0 9px;
  color: #f2f7fd;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -.025em;
}
.cx-routes li > p:not(.cx-routes-when) {
  margin: 0 0 18px;
  color: var(--dim2);
  font-size: 13.5px;
  line-height: 1.6;
}
.cx-routes .btn { margin-top: auto; align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; }

/* the hero demo control has to say what it does, or the visitor reads one mode
   as the whole company */
.hero-demo-lead {
  margin: 0 0 10px;
  color: var(--dim2);
  font: 650 11px/1.4 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
@media (max-width: 620px) { .hero-demo-lead { font-size: 10.5px; margin-bottom: 8px; } }

/* ── restored hero product scenes ───────────────────────────────────────────
 * The V3 rebuild removed the coded interface scene from every specialist hero
 * and left the right half empty. The scene is back, with the V4 client-first
 * copy beside it. The page names what the interface IS; the scene keeps its own
 * product identity inside its window chrome, as a quiet secondary label.
 */
.svcx-product-label {
  margin: 14px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}
.svcx-product-label b {
  color: #e6eef8;
  font: 650 11px/1.3 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.svcx-product-label span {
  color: rgba(151, 174, 206, .68);
  font: 600 10px/1.4 var(--mono);
  letter-spacing: .07em;
}

/* the hero copy keeps V4's rhythm inside the split layout */
.svcx-hero-split .svcx-hero-copy .cx-recognise { margin-top: 1.2rem; }

@media (max-width: 900px) {
  /* copy first, then a full-width scene that is still large enough to read */
  .svcx-hero-split { grid-template-columns: 1fr; }
  .svcx-hero-split .svcx-product { order: 2; margin-top: 1.9rem; }
  .svcx-product-label { margin-top: 12px; }
}

/* ── hero balance: the proof must match the message ─────────────────────────
 * V4's copy column runs ~678px tall where the old one was ~457px, so the
 * original 645x403 scene floated in a ~450px vertical void. The frame is scaled
 * from its right edge so it grows into the page gutter rather than over the
 * copy - restoring the balance and giving back the edge-of-frame depth the old
 * composition had. The scene's own layout is untouched, so every label stays
 * crisp at its authored size.
 */
/* below 1360 the gutter is too small for the bleed and the frame would clip */
@media (min-width: 1360px) {
  .svcx-hero-split .svcx-product-frame {
    transform: scale(1.2);
    /* grows toward the page gutter, never back over the copy */
    transform-origin: left center;
  }
  .svcx-hero-split .svcx-product-label {
    margin-top: calc(14px + (0.22 * 403px) / 2);
  }
}

/* ── HOME flagship: five different systems, visible together ────────────────
 * Not one dashboard, not tabs that replace the visual. A customer product with
 * photography, the same product on a phone, an operations workspace, an
 * analytics surface and an AI review surface - overlapping on different planes
 * so the hero reads as proof of range before anything is clicked.
 */
/* the montage grid no longer applies: the flagship places its own planes.
   Denser surfaces need more room than the old montage did, so on wide screens
   it takes back the gap and bleeds a little further into the right gutter. */
.hero-flagship { position: relative; display: block; min-height: 0; }
@media (min-width: 1180px) {
  body[data-page="home"] .hero-grid { gap: clamp(22px, 2.1vw, 34px); }
  .hero-flagship { width: min(128%, 1000px); margin-left: -6%; margin-right: -3.5%; }
}
@media (min-width: 1000px) and (max-width: 1179px) {
  body[data-page="home"] .hero-grid { gap: 24px; }
  .hero-flagship { width: 122%; margin-left: -8%; margin-right: -3%; }
}
.fx-env {
  position: relative;
  width: 100%;
  min-height: 700px;
  isolation: isolate;
  perspective: 1800px;
}
.fx-slot { position: absolute; }
.fx-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(194, 216, 244, .22);
  border-radius: 12px;
  background: #060b13;
  box-shadow: 0 34px 76px rgba(0, 0, 0, .62);
}
.fx-frame .svc-scene { width: 100%; }

/* the four category tags, static - the visitor should not have to click */
.fx-tag {
  position: absolute;
  top: -30px;
  left: 10px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border: 1px solid rgba(178, 201, 230, .52);
  border-radius: 99px;
  background: #070b12;
  box-shadow: 0 0 0 3px rgba(4, 7, 12, .72), 0 10px 26px rgba(0, 0, 0, .58);
  color: #dce7f5;
  font: 650 9px/1 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  white-space: nowrap;
}
.fx-tag i {
  display: flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 4px;
  font-style: normal; font-size: 8.5px; color: #05080d;
}
.fx-tag--product i { background: #e8b979; }
.fx-tag--ops i     { background: #5ee2a5; }
.fx-tag--data i    { background: #58c8ff; }
.fx-tag--ai        { border-color: rgba(167, 139, 250, .42); }
.fx-tag--ai i      { background: #a78bfa; }

/* ── planes ── */
/* Four landscape surfaces and a phone. Laid out so each interface is
   substantially readable rather than piled: the queue overlaps the product
   for depth, the two lower surfaces sit beside each other and only just
   touch. Real screens are the argument, so they have to be legible. */
/* Weight carries the hierarchy: the customer product leads, operations and
   forecasting are the two secondary surfaces, the evidence surface is
   tertiary, the phone is an accent. Three panels at the same size read as
   four unrelated cards, which is the failure this avoids. */
.fx-slot--product { left: 0;    top: 0;    width: 66%; z-index: 3; }  /* primary   */
.fx-slot--phone   { right: 0;   top: 9%;   width: 17%; z-index: 7; }  /* accent    */
.fx-slot--ops     { left: 33%;  top: 30%;  width: 50%; z-index: 5; }  /* secondary */
.fx-slot--data    { left: 0;    top: 62%;  width: 56%; z-index: 6; }  /* secondary */
.fx-slot--ai      { right: 0;   top: 58%;  width: 45%; z-index: 8; }  /* tertiary  */

/* the reused surfaces are absolutely positioned by their own rules; inside a
   slot they should simply fill it */
.fx-slot > .hero-laptop,
.fx-slot > .hero-phone,
.fx-slot > .hero-surface {
  position: relative !important;
  left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
  width: 100% !important;
}

/* The phone is narrower here than the surface was designed for. The saved
   list was landing on the tab bar (which is pinned to the padding box, so no
   amount of padding moves it); the featured card takes that room instead. */
.fx-slot--phone .cwapp-list { display: none; }

/* the product surface is a laptop, not a framed screenshot: its label can sit
   on the bezel the way it always did */
.fx-tag--product { top: -13px; }

/* the honesty line stays legible but must never compete with the work it
   labels - same quiet treatment the original montage used */
.hero-flagship .study-disclosure {
  position: absolute;
  left: 2px;
  bottom: -34px;
  z-index: 9;
  margin: 0;
  max-width: 62%;
  color: rgba(166, 186, 209, .58);
  font: 600 8px/1.5 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ── HOME flagship: surface depth ───────────────────────────────────────────
 * The reference the owner sent was not a different layout, it was denser
 * surfaces: more columns, more measures, a comparison series, a channel
 * split, a real review with named risks. All of it is scoped to
 * .hero-flagship - the nine approved service heroes share these scene
 * classes and must not move.
 */

/* On the service pages the scene is a fixed 16/10 stage with the window
   absolutely positioned inside it, which leaves the denser home copies either
   padded with dead space or clipped. Here the window flows instead, so each
   panel is exactly as tall as what it holds. */
.hero-flagship .svc-scene--hero { aspect-ratio: auto; }
.hero-flagship .svc-scene--hero > .sc-win--app {
  position: static;
  inset: auto;
  width: auto;
  margin: 2.6cqw;
}

/* The photograph was flattened to saturate(.78) brightness(.74) so the copy
 * on top of it stayed legible, which is why it read as stock. A premium
 * product shot keeps its own contrast and darkens only the band the copy
 * sits in. Scrim at z-index 1: the copy is 2, the featured card is 3.
 */
.hero-flagship .cwsite-image img {
  filter: saturate(1.06) contrast(1.09) brightness(.94);
  object-position: center 58%;
}

/* The fictional product carries its own numbers, like a finished site.
   This sits inside .hero-laptop, which is NOT a container-query context, so
   these are sized in px: cqw here resolves against the wrong ancestor.
   ORBIT covers the photograph's lower left and the featured card holds the
   lower right, so the strip goes in the clear band under the nav. */
.hero-flagship .cwsite-stats {
  position: absolute;
  right: 3.5%;
  top: 27%;
  z-index: 3;
  display: flex;
  gap: 14px;
  text-align: right;
}

/* each plane keeps its own accent, so the range reads before the labels do */
/* Three of the five planes are now BIRTH's own rendered interfaces from the
   100-visual library rather than panels rebuilt in CSS. They carry their own
   chrome, their own fictional-data labelling and far more of a real product
   than a hand-built mock can. The frame only holds and lifts them. */
.fx-shot { display: block; }
.fx-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
}
.fx-slot > .fx-frame > .fx-shot img { border-radius: 11px; }
.fx-slot--ops  > .fx-frame { border-color: rgba(94, 226, 165, .30); }
.fx-slot--data > .fx-frame { border-color: rgba(88, 200, 255, .32); }
.fx-slot--ai   > .fx-frame { border-color: rgba(167, 139, 250, .36); }
.fx-slot--ops  > .fx-frame,
.fx-slot--data > .fx-frame,
.fx-slot--ai   > .fx-frame { background: #05090f; }

/* Narrow desktops and tablets: the same five planes, spread further apart.
   At this width the analytics surface was sitting on the operations queue and
   hiding the rows that make it read as a work queue. */
@media (min-width: 701px) and (max-width: 1179px) {
  /* the review stacks at this width, so the stage needs the extra height or
     the hero's overflow clips the approval the whole panel is about */
  /* tightened so the whole composition, approval included, clears a
     768-tall fold at this width without shrinking any panel */
  .hero-flagship .fx-env { min-height: 720px; }
  /* the same hierarchy, proportioned for a narrower stage. Operations still
     lands on the photograph rather than the editorial headline. */
  .fx-slot--product { left: 0;   top: 0;   width: 74%; }
  .fx-slot--phone   { right: 0;  top: 8%;  width: 19%; }
  .fx-slot--ops     { left: 36%; top: 32%; width: 56%; }
  .fx-slot--data    { left: 0;   top: 64%; width: 60%; }
  .fx-slot--ai      { right: 0;  top: 58%; width: 50%; }
  /* the product is small enough here that the strip lands on the featured
     card; the nav, headline and card already carry it */
  .hero-flagship .cwsite-stats { display: none; }
}

/* Below roughly 1160px the surfaces are narrower than the content they hold.
   Rather than shrink the type past reading size, they carry less: the queue
   drops the two columns a glance does not need, and the review stacks. */
@media (max-width: 1159px) {
  .hero-flagship .hero-ops-table--wide .hero-ops-row {
    grid-template-columns: 1.9fr .85fr .85fr auto;
  }
  .hero-flagship .hero-ops-row > :nth-child(2),
  .hero-flagship .hero-ops-row > :nth-child(5) { display: none; }
  .hero-flagship .fxa-split { grid-template-columns: 1fr; gap: 1.1cqw; }
  .hero-flagship .fxd-split { grid-template-columns: 1fr 1.25fr; }
}

/* ── HOME flagship on a phone ───────────────────────────────────────────────
 * A five-plane collage shrunk to a 350px column is unreadable, so the phone
 * gets a different composition rather than a smaller one: copy first, then
 * three of the five systems stacked at full column width, each clearly
 * labelled and none overlapping. The phone mock is dropped (the visitor is
 * already holding one) and analytics gives way to keep the hero a hero.
 */
@media (max-width: 700px) {
  .hero-flagship .fx-env {
    display: grid;
    gap: 30px;
    min-height: 0;
    perspective: none;
  }
  .hero-flagship .fx-slot {
    position: static;
    left: auto; right: auto; top: auto;
    width: auto;
    z-index: auto;
  }
  .hero-flagship .fx-slot--phone,
  .hero-flagship .fx-slot--data { display: none; }

  .hero-flagship .fx-tag {
    position: static;
    margin: 0 0 9px;
    font-size: 8.5px;
  }
  .hero-flagship .fx-tag i { display: none; }

  .hero-flagship .fx-frame { border-radius: 10px; }
  /* the phone reflow is 640x800, so the 16:9 width/height on the img
     would otherwise reserve the wrong box and shift the page */
  .hero-flagship .fx-shot img { aspect-ratio: 640 / 800; }

  /* container units are relative to a 350px panel here, which puts the
     review's supporting text near 5px. These are illustrations of software,
     not body copy, but they still have to be readable on a real phone. */
  .hero-flagship .hero-ops-row { font-size: 9px; }
  .hero-flagship .hero-ops-row em,
  .hero-flagship .hero-ops-row u,
  .hero-flagship .hero-ops-row b { font-size: 7.6px; }
  .hero-flagship .hero-ops-row--head { font-size: 6.6px; }
  .hero-flagship .fxa-head b { font-size: 3.2cqw; }
  .hero-flagship .fxa-head span { font-size: 2cqw; }
  .hero-flagship .fxa-stats small { font-size: 1.8cqw; }
  .hero-flagship .fxa-stats b { font-size: 3cqw; }
  .hero-flagship .fxa-col > small { font-size: 1.9cqw; }
  .hero-flagship .fxa-risk { font-size: 2.1cqw; }
  .hero-flagship .fxa-risk i { font-size: 1.7cqw; }
  .hero-flagship .fxa .sc-conf span,
  .hero-flagship .fxa .sc-gate span { font-size: 2cqw; }
  .hero-flagship .fxa .sc-conf b,
  .hero-flagship .fxa .sc-gate b { font-size: 2cqw; }
  .hero-flagship .study-disclosure {
    position: static;
    max-width: none;
    margin-top: 20px;
    font-size: 7.5px;
    letter-spacing: .09em;
  }
}

/* ── HOME hero atmosphere ───────────────────────────────────────────────────
 * .hero-wave and .hero-keylight are in the markup but carry no styling at all
 * (only opacity and will-change survive in birth-flagship.css), so the hero
 * sat on a flat near-black gradient. That flatness is what made a dense,
 * well-built composition still read as cheap next to a lit reference.
 *
 * No blur filter here: the hero clips its overflow, and blurring a clipped
 * box paints its own rectangular edge, which reads as a defect rather than
 * as light. The softness comes from the gradient stops instead.
 * Both layers are decorative and sit behind everything the visitor reads.
 */
body[data-page="home"] .home-hero { isolation: isolate; }

/* the room the composition is lit in: cool key from upper right, warm bounce
   from lower left, so the frame has a direction instead of being evenly dark */
body[data-page="home"] .hero-keylight {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(66% 60% at 76% 14%, rgba(86, 138, 255, .32), transparent 66%),
    radial-gradient(46% 46% at 97% 52%, rgba(132, 94, 255, .22), transparent 68%),
    radial-gradient(58% 52% at 6% 90%, rgba(255, 166, 88, .17), transparent 66%),
    radial-gradient(40% 36% at 38% 2%, rgba(122, 192, 255, .13), transparent 70%);
}

/* two long, very soft sweeps - warm rising from the lower left, cool falling
   from the upper right. Wide stops, low alpha: light, not stripes. */
body[data-page="home"] .hero-wave {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
  background:
    linear-gradient(107deg,
      transparent 18%, rgba(255, 198, 136, .07) 31%, rgba(255, 184, 112, .20) 40%,
      rgba(255, 198, 136, .07) 49%, transparent 63%),
    linear-gradient(101deg,
      transparent 34%, rgba(255, 170, 100, .10) 49%, rgba(255, 170, 100, .03) 57%, transparent 71%),
    linear-gradient(95deg,
      transparent 52%, rgba(255, 152, 88, .06) 64%, transparent 78%),
    linear-gradient(73deg,
      transparent 40%, rgba(118, 178, 255, .12) 60%, rgba(118, 178, 255, .04) 71%, transparent 85%);
}

/* The hero was carrying 135px of empty space above the headline and 149px
   below the copy. Tightened so the frame is filled rather than padded. */
@media (min-width: 1180px) {
  body[data-page="home"] .home-hero {
    min-height: 0;
    padding-top: calc(var(--nav-h) + 30px);
    padding-bottom: 48px;   /* the disclosure hangs 34px below the stage */
  }
}