/* ==========================================================================
   Private AI Partner for Executives — page-level patterns
   Loads after tokens.css / home.css / agentic.css / index.css.
   Every value resolves through the Agentic token contract; no raw hex here.
   ========================================================================== */

/* Table captions carry the structure for screen readers only */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- Six-stage stepbar (the shared component assumes seven) ------- */
.stepbar--six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1023px) {
  .stepbar--six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* the shared 4-column rule trims the wrong node once we are on three */
  .stepbar--six .stepbar__node:nth-child(4)::before { right: 0; width: auto; }
  .stepbar--six .stepbar__node:nth-child(3n)::before { right: auto; width: calc(100% - var(--space-3)); }
}
@media (max-width: 599px) {
  .stepbar--six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stepbar--six .stepbar__node:nth-child(3n)::before { right: 0; width: auto; }
  .stepbar--six .stepbar__node:nth-child(2n)::before { right: auto; width: calc(100% - var(--space-3)); }
}

/* ---------- Hero: a service page states the offer, not a riddle ---------- */
.ahero--service .ahero__title { max-width: 20ch; }
.ahero--service .ahero__lead { margin-top: 0; }
.ahero--service .ahero__lead + .ahero__lead { margin-top: var(--space-4); }
/* A key statement set off by an amber rule. The hero denial and the same
   move deeper in the page share one definition so they never drift apart. */
.ahero__deny, .keyline {
  padding-left: var(--space-5);
  border-left: 2px solid var(--warn);
  font-size: var(--text-body-lg);
  line-height: 1.5;
  color: var(--fg);
  max-width: 62ch;
}
.ahero__deny { margin-top: var(--space-6); max-width: 54ch; }

/* ---------- Comparison table wrapper ------------------------------------ */
.tablewrap {
  border: var(--border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow: hidden;
}
.tablewrap .table th:first-child,
.tablewrap .table td:first-child { width: 44%; color: var(--color-text-muted); }
.tablewrap .table td:last-child { color: var(--color-text-primary); }
.tablewrap .table th { background: color-mix(in oklab, var(--sec-accent) 9%, var(--surface)); }
.tablewrap .table th:last-child { color: var(--sec-accent); }
.tablewrap .table tbody tr:last-child td { border-bottom: 0; }

/* ---------- Capability records ------------------------------------------ */
.caps-stack { display: flex; flex-direction: column; gap: var(--space-6); }
.cap {
  border: var(--border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow: hidden;
}
.cap__head {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-6);
  border-bottom: var(--border);
}
.cap__n {
  font-family: var(--font-mono);
  font-size: var(--text-overline);
  letter-spacing: 0.09em;
  color: var(--sec-accent);
  padding-top: 7px;
}
.cap__head h3 { font-size: 1.375rem; letter-spacing: -0.01em; max-width: 30ch; }
.cap__head p { margin-top: var(--space-3); font-size: var(--text-body); color: var(--color-text-secondary); max-width: 70ch; }
.cap__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cap__col { padding: var(--space-6); border-left: var(--border); }
.cap__col:first-child { border-left: 0; }
.cap__col .overline { color: var(--color-text-muted); }
.cap__col > p { margin-top: var(--space-4); font-size: var(--text-small); color: var(--color-text-secondary); }
.cap__col > p + p { margin-top: var(--space-3); }
.cap__col .strong { color: var(--color-text-primary); }
.cap ul { list-style: none; margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.cap li { position: relative; padding-left: var(--space-5); font-size: var(--text-small); color: var(--color-text-secondary); }
.cap li::before {
  content: ''; position: absolute; left: 0; top: 10px;
  width: 10px; height: 1px;
  background: color-mix(in oklab, var(--sec-accent) 70%, transparent);
}
.cap ol { list-style: none; counter-reset: cq; margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.cap ol li { counter-increment: cq; padding-left: var(--space-6); color: var(--color-text-primary); }
.cap ol li::before {
  content: counter(cq); top: 0; width: auto; height: auto; background: none;
  font-family: var(--font-mono); font-size: var(--text-overline); color: var(--sec-accent);
}
.cap__bound {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-top: var(--border);
  background: color-mix(in oklab, var(--warn) 7%, var(--surface));
}
.cap__bound svg { color: var(--warn); margin-top: 2px; }
.cap__bound b {
  display: block;
  font-family: var(--font-mono); font-size: var(--text-overline);
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--warn); font-weight: 500;
}
.cap__bound p { margin-top: 6px; font-size: var(--text-small); color: var(--fg); max-width: 88ch; }

.cap__note {
  padding: var(--space-5) var(--space-6);
  border-top: var(--border);
  background: var(--color-bg-section);
}
.cap__note p { font-size: var(--text-small); color: var(--color-text-secondary); max-width: 88ch; }
.cap__note p + p { margin-top: var(--space-3); color: var(--color-text-primary); }

/* ---------- Dense sub-lists inside borrowed components ------------------ */
.control ul, .ledger ul {
  list-style: none;
  margin-top: var(--space-3);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-5);
}
.control--wide ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.step ul { list-style: none; margin-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.control li, .ledger li, .step li {
  position: relative;
  padding-left: var(--space-4);
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
}
.control li::before, .ledger li::before, .step li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 6px; height: 1px; background: var(--color-border-strong);
}
@media (max-width: 767px) {
  .control ul, .ledger ul, .control--wide ul { grid-template-columns: 1fr; }
}

/* ---------- Spec grid: 3 + 2 -------------------------------------------- */
.specs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border: var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.spec {
  grid-column: span 2;
  padding: var(--space-6);
  background: var(--color-surface);
  border-left: var(--border);
  border-top: var(--border);
}
.spec:nth-child(-n+3) { border-top: 0; }
.spec:nth-child(3n+1) { border-left: 0; }
.spec--half { grid-column: span 3; }
.spec__k {
  font-family: var(--font-mono); font-size: var(--text-overline);
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--sec-accent);
}
.spec h3 { margin-top: var(--space-3); font-size: 1.0625rem; }
.spec > p { margin-top: var(--space-3); font-size: var(--text-small); color: var(--color-text-secondary); }
.spec > p + p { margin-top: var(--space-2); }
.spec .muted { color: var(--color-text-muted); }
.spec ul { list-style: none; margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.spec li { position: relative; padding-left: var(--space-5); font-size: var(--text-small); color: var(--color-text-secondary); }
.spec li::before {
  content: ''; position: absolute; left: 0; top: 10px;
  width: 10px; height: 1px; background: var(--color-border-strong);
}

/* ---------- Foundations -------------------------------------------------- */
.founds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.found {
  border: var(--border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  padding: var(--space-6);
  display: flex; flex-direction: column;
}
.found__k {
  font-family: var(--font-mono); font-size: var(--text-overline);
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-text-muted);
}
.found h3 { margin-top: var(--space-3); font-size: 1.25rem; }
.found > p { margin-top: var(--space-4); font-size: var(--text-small); color: var(--color-text-secondary); }
.found > p + p { margin-top: var(--space-3); color: var(--color-text-muted); }
.found ul { list-style: none; margin-top: var(--space-4); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-4); }
.found li { position: relative; padding-left: var(--space-4); font-size: var(--text-caption); color: var(--color-text-secondary); }
.found li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 6px; height: 1px; background: var(--color-border-strong);
}

/* ---------- Working day timeline ---------------------------------------- */
.day { border: var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.day__row {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr);
  gap: var(--space-6);
  padding: var(--space-6);
  background: var(--color-surface);
  border-top: var(--border);
}
.day__row:first-child { border-top: 0; }
.day__when { position: relative; padding-left: var(--space-5); }
.day__when::before {
  content: ''; position: absolute; left: 0; top: 5px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--color-bg); border: 1px solid var(--sec-accent);
}
.day__when::after {
  content: ''; position: absolute; left: 4px; top: 18px; bottom: calc(var(--space-6) * -1 - 6px);
  width: 1px; background: var(--color-border);
}
.day__row:last-child .day__when::after { display: none; }
.day__t { display: block; font-family: var(--font-mono); font-size: var(--text-small); letter-spacing: 0.04em; color: var(--warn); }
.day__l { display: block; margin-top: 6px; font-size: var(--text-body); color: var(--color-text-primary); font-weight: var(--weight-emphasize); }
.day__body > p { font-size: var(--text-small); color: var(--color-text-secondary); }
.day__body > p + p { margin-top: var(--space-3); }
.day__body .strong { color: var(--color-text-primary); }
.day__body ul { list-style: none; margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.day__body li { position: relative; padding-left: var(--space-5); font-size: var(--text-small); color: var(--color-text-secondary); }
.day__body li::before {
  content: ''; position: absolute; left: 0; top: 10px;
  width: 10px; height: 1px; background: color-mix(in oklab, var(--sec-accent) 70%, transparent);
}

/* ---------- Fit: two columns + the honest exit -------------------------- */
.fit2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.fitcard {
  border: var(--border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  padding: var(--space-6);
}
.fitcard .overline { color: var(--sec-accent); }
.fitcard ul { list-style: none; margin-top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.fitcard li { position: relative; padding-left: var(--space-6); font-size: var(--text-small); color: var(--color-text-secondary); }
.fitcard li::before {
  content: ''; position: absolute; left: 0; top: 6px;
  width: 12px; height: 7px;
  border-left: 1.5px solid var(--sec-accent); border-bottom: 1.5px solid var(--sec-accent);
  transform: rotate(-45deg);
}
.exit {
  margin-top: var(--space-6);
  border: var(--border);
  border-left: 3px solid var(--warn);
  border-radius: var(--radius-lg);
  background: var(--color-bg-section);
  padding: var(--space-6);
}
.exit h3 { font-size: 1.125rem; }
.exit > p { margin-top: var(--space-3); font-size: var(--text-small); color: var(--color-text-secondary); }
.exit ul { list-style: none; margin-top: var(--space-4); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-6); }
.exit li { position: relative; padding-left: var(--space-5); font-size: var(--text-small); color: var(--color-text-secondary); }
.exit li::before {
  content: ''; position: absolute; left: 0; top: 10px;
  width: 10px; height: 1px; background: var(--warn);
}
.exit__note { margin-top: var(--space-5); padding-top: var(--space-4); border-top: var(--border); }
.exit__note p { font-size: var(--text-small); color: var(--color-text-primary); }
.exit__note p + p { margin-top: 6px; color: var(--color-text-muted); }

/* ---------- Shadow-mode outcome chips ----------------------------------- */
.outcomes { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); padding: 0; }
.outcomes li {
  font-family: var(--font-mono); font-size: var(--text-overline);
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  color: var(--color-text-secondary);
}
.outcomes li:first-child { color: var(--success); border-color: color-mix(in oklab, var(--success) 50%, transparent); }
.outcomes li:last-child { color: var(--danger); border-color: color-mix(in oklab, var(--danger) 45%, transparent); }

/* ---------- Responsive --------------------------------------------------- */
@media (max-width: 1023px) {
  .cap__body { grid-template-columns: 1fr; }
  .cap__col { border-left: 0; border-top: var(--border); }
  .cap__col:first-child { border-top: 0; }
  .founds { grid-template-columns: 1fr; }
  .found ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec, .spec--half { grid-column: span 1; }
  .spec { border-top: var(--border) !important; border-left: var(--border); }
  .spec:nth-child(-n+2) { border-top: 0 !important; }
  .spec:nth-child(odd) { border-left: 0; }
  .fit2 { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .ahero--service .ahero__title { max-width: none; }
  .cap__head { grid-template-columns: 1fr; gap: var(--space-2); }
  .cap__n { padding-top: 0; }
  .cap__head, .cap__col, .cap__bound { padding: var(--space-5); }
  .specs { grid-template-columns: 1fr; }
  .spec { border-left: 0 !important; }
  .spec:first-child { border-top: 0 !important; }
  .found ul { grid-template-columns: 1fr; }
  .day__row { grid-template-columns: 1fr; gap: var(--space-4); padding: var(--space-5); }
  .day__when::after { display: none; }
  .exit ul { grid-template-columns: 1fr; }
  .tablewrap .table th, .tablewrap .table td { padding: var(--space-3); font-size: var(--text-caption); }
  .tablewrap .table th:first-child, .tablewrap .table td:first-child { width: 42%; }
}

/* ---------- Section head: emphasis on the second sentence ---------------
   Default puts the weight on the first paragraph and dims the second. When
   the setup line comes first and the argument lands second, flip it. */
.sec-head__body--flip > p:first-of-type { color: var(--color-text-muted); }
.sec-head__body--flip > p + p { color: var(--color-text-primary); }

/* ---------- Sticky section bar -------------------------------------------
   Sits in the flow right after the hero, so it simply sticks once the reader
   scrolls past it — no JS needed to reveal it. Carries the only persistent
   CTA on the page, which is why no section needs its own button. */
.secnav {
  position: sticky;
  top: 69px;                       /* 68px header bar + its 1px rule */
  z-index: 40;
  background: var(--color-bg);
  border-bottom: var(--border);
}
.secnav__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: 52px;
}
.secnav__list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.secnav__list::-webkit-scrollbar { height: 0; }
.secnav__link {
  position: relative;
  flex: none;
  padding: var(--space-2) var(--space-3);
  border: 0;
  font-size: var(--text-small);
  letter-spacing: 0.01em;
  color: var(--color-text-muted);
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.secnav__link:hover { color: var(--color-text-primary); }
.secnav__link[aria-current='true'] { color: var(--color-text-primary); }
.secnav__link[aria-current='true']::after {
  content: '';
  position: absolute;
  left: var(--space-3); right: var(--space-3); bottom: -1px;
  height: 2px;
  background: var(--accent);
}
/* Hidden items to either side are signalled by fading the edge, never by a
   scrollbar. The attribute is set by script from actual scroll position. */
.secnav__list[data-overflow='end'] {
  mask-image: linear-gradient(to right, black calc(100% - 36px), transparent);
}
.secnav__list[data-overflow='start'] {
  mask-image: linear-gradient(to right, transparent, black 36px);
}
.secnav__list[data-overflow='both'] {
  mask-image: linear-gradient(to right, transparent, black 36px, black calc(100% - 36px), transparent);
}

/* ---------- Header actions on phones --------------------------------------
   The bar carries no CTA of its own; the sticky header does, at every width.
   Below 768 the language switcher moves into the burger panel to make room. */
.cta-short { display: none; }
.lang--in-nav { display: none; }

/* anchor jumps must clear both sticky bars, not just the header */
.sec { scroll-margin-top: 132px; }

/* ---------- Mid-page ask --------------------------------------------------
   Two only, placed where the reader has just reached a point of conviction. */
.midcta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-top: var(--space-8);
  padding: var(--space-6);
  border: var(--border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.midcta p {
  font-size: var(--text-body-lg);
  color: var(--color-text-primary);
  max-width: 54ch;
}
.midcta .btn { flex: none; }

@media (max-width: 767px) {
  .secnav__inner { min-height: 48px; }
  .secnav__list { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }

  /* the ask stays in the bar; the language switcher gives up its seat */
  .site-header__actions > .btn--primary { display: inline-flex; }
  .site-header__actions > .btn--primary .cta-long { display: none; }
  .site-header__actions > .btn--primary .cta-short { display: inline; }
  .site-header__actions > .lang { display: none; }
  .lang--in-nav {
    display: inline-flex;
    align-self: flex-end;
    margin-top: var(--space-5);
  }

  .midcta { flex-direction: column; align-items: stretch; padding: var(--space-5); }
  .midcta .btn { width: 100%; }
}

/* ---------- Two ranks of numbering, told apart by form not colour --------
   Level 1 — the section index: small mono label with a rule above it.
   Level 2 — an item inside it: a large display numeral. The implementation
   steps already read this way; capability records and ledgers now match, so
   a numeral always means "one item of several" and invites the next one. */
.cap__n, .ledger__n, .step__n {
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: var(--weight-announce);
  letter-spacing: -0.02em;
  line-height: 1;
  text-transform: none;
  font-variant-numeric: tabular-nums;
  color: var(--sec-accent);
}
.cap__n { padding-top: 2px; }
.ledger__n { padding-top: 1px; }