/* ==========================================================================
   ai-deployment.html · page CSS
   Loads after styles.css. Every rule is scoped under .page-deploy or uses a
   dep- class. Tokens only: no raw colour values, no importance overrides.
   ========================================================================== */

/* ---------- Hero ---------- */
.page-deploy .dep-hero__title { max-width: 17ch; }
.page-deploy .dep-index__stage {
  font-size: var(--fs-caption); line-height: 1.5; color: var(--fg-2); white-space: nowrap;
}
@media (max-width: 520px) {
  .page-deploy .dep-index__stage { white-space: normal; }
}

/* ---------- Practice index: practice head left, service rows right ---------- */
.dep-practice {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap); row-gap: var(--space-5);
  padding: clamp(18px, 2vw, 26px) 0 clamp(26px, 3vw, 40px);
  border-top: 1px solid var(--rule);
}
.dep-practice > * { grid-column: 1 / -1; min-width: 0; }
.dep-practice__name {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.5rem, 1.25rem + 0.7vw, 2rem); line-height: 1.1; letter-spacing: -0.026em;
}
.dep-practice__stage {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
  font-size: var(--fs-caption); font-weight: 600; color: var(--fg-2);
}
.dep-practice__stage::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--mark); }
.dep-practice__intro { margin-top: 12px; max-width: 34ch; font-size: var(--fs-small); line-height: 1.55; color: var(--fg-2); }

.dep-svc {
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr));
  column-gap: var(--col-gap); row-gap: 6px;
  padding: 16px 0 18px; border-top: 1px solid var(--line);
}
.dep-svc:first-child { border-top: 0; padding-top: 2px; }
.dep-svc:last-child { padding-bottom: 0; }
.dep-svc__name {
  grid-column: 1 / span 3; min-width: 0;
  font-family: var(--font-sans); font-size: 1.0625rem; font-weight: 600; line-height: 1.4;
}
.dep-svc__body { grid-column: 4 / span 5; min-width: 0; }
.dep-svc__body > p:first-child { font-size: 1rem; line-height: 1.6; }
.dep-svc__body a { text-decoration: underline; text-decoration-color: var(--link-line); }
.dep-svc__work { margin-top: 8px; font-size: var(--fs-small); line-height: 1.5; color: var(--fg-2); }
.dep-svc__work > span:first-child { margin-right: 8px; font-weight: 600; color: var(--fg); }

@media (min-width: 921px) {
  .dep-practice__head { grid-column: 1 / span 4; }
  .dep-svcs { grid-column: 5 / span 8; }
}
@media (max-width: 920px) {
  .dep-svc:first-child { border-top: 1px solid var(--line); padding-top: 16px; }
}
@media (max-width: 760px) {
  .dep-svc { grid-template-columns: minmax(0, 1fr); }
  .dep-svc__name, .dep-svc__body { grid-column: 1 / -1; }
}

/* ---------- Lifecycle with "You get" under each stage ---------- */
.dep-gets { margin-top: var(--space-5); padding-top: 12px; border-top: 1px solid var(--line-2); }
.dep-gets__label { font-size: var(--fs-caption); font-weight: 600; color: var(--fg); }
.dep-gets__list { margin-top: 4px; }
.dep-gets__list li {
  position: relative; padding: 8px 0 8px 22px; border-bottom: 1px solid var(--line);
  font-size: var(--fs-small); line-height: 1.45; color: var(--fg-2);
}
.dep-gets__list .i { position: absolute; left: 0; top: 11px; width: 14px; height: 14px; color: var(--mark); }

@media (min-width: 921px) {
  /* Align description and "You get" across the four stages */
  .dep-lifecycle { grid-template-rows: repeat(3, auto); }
  .dep-lifecycle > li { grid-row: span 3; display: grid; grid-template-rows: subgrid; row-gap: 0; }
}

/* ---------- Products we deploy: two offerings, aligned rows ---------- */
.dep-products { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-8); }
.dep-product { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; padding-top: 18px; border-top: 1px solid var(--rule); }

.dep-product__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-4); align-items: baseline; }
.dep-product__name {
  grid-column: 1; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.625rem, 1.35rem + 0.8vw, 2.125rem); line-height: 1.1; letter-spacing: -0.028em;
}
.dep-product__name a {
  text-decoration: underline; text-decoration-color: var(--link-line);
  text-decoration-thickness: 1px; text-underline-offset: 6px;
}
.dep-product__name a:hover { text-decoration-thickness: 2px; }
.dep-product__name .i { display: inline-block; width: 18px; height: 18px; margin-left: 10px; vertical-align: -0.05em; transition: transform .18s ease; }
.dep-product__name a:hover .i { transform: translateX(3px); }
.dep-product__tag { grid-column: 1; margin-top: 6px; font-size: var(--fs-small); line-height: 1.45; color: var(--fg-2); }
.dep-product__state { grid-column: 2; grid-row: 1; white-space: nowrap; }
.dep-product__desc { font-size: 1rem; line-height: 1.6; max-width: 62ch; }

/* Photo framed like the homepage photo spreads: 8px radius */
.dep-product__fig--photo picture { overflow: hidden; background: var(--bg-muted); border-radius: var(--radius-3); }
.dep-product__fig--photo img { width: 100%; height: auto; object-fit: cover; }

/* Side by side only once the Agent Guru window has room for both of its panes
   (below 1181px the half column clips the facts table and squeezes the coach
   bubble, so the two offerings stack, as on tablets). */
@media (min-width: 1181px) {
  .dep-products {
    grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto);
    column-gap: calc(var(--col-gap) * 2); row-gap: 0;
  }
  .dep-product { grid-row: span 5; display: grid; grid-template-rows: subgrid; row-gap: var(--space-5); }
  /* The photo fills the height of the mockup beside it */
  .dep-product__fig--photo { display: flex; flex-direction: column; }
  .dep-product__fig--photo picture { flex: 1 1 auto; min-height: 0; }
  .dep-product__fig--photo img { height: 100%; }
}
@media (max-width: 420px) {
  .dep-product__head { grid-template-columns: minmax(0, 1fr); }
  .dep-product__state { grid-column: 1; grid-row: auto; margin-top: 8px; }
}

/* Coach exchange inside the compact score mockup (Fig. 2) */
.dep-ui-msgs { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.dep-ui-msgs .msg { max-width: 100%; }
.dep-ui-msgs .msg--rep { margin-left: 12px; }
/* In the half-width column, give the facts and coach pane a fairer share */
@media (min-width: 1181px) {
  .dep-product__fig .ui__body { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}

/* Lifecycle stacked on small phones: more air between stages */
@media (max-width: 520px) {
  .dep-lifecycle > li { padding-bottom: 36px; }
  .dep-lifecycle > li:last-child { padding-bottom: 0; }
}

@media (max-width: 520px) {
  .dep-svc__work > span:first-child { display: block; margin-right: 0; }
}