/* pages.css — the bespoke page components, in the new language.
 *
 * ai.html, how-it-works.html and the cycle diagram each shipped their own
 * stylesheet against the old indigo theme. Their layout was fine; only the
 * palette and the type were wrong. This is those three files with every colour
 * remapped onto the new tokens and the old font stack removed, so the pages
 * keep their components and change their skin.
 */

/* ---------- from ai.css ---------- */
/* AI / Intelligence Core page. Loads after theme.css and site.css. */

/* ===== hero ===== */
.ic-hero { padding-top: 30px; }
.ic-hero .lp-hero-fine { margin-top: 20px; }
.ic-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--indigo); background: color-mix(in srgb, var(--indigo) 8%, transparent); border: 1px solid color-mix(in srgb, var(--indigo) 18%, transparent); border-radius: 999px; padding: 6px 14px 6px 8px; }

/* ===== the three-axis formula ===== */
.ic-formula { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 14px; margin-top: 38px; }
.ic-fx { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px 22px 24px; }
.ic-fx-n { font-size: 34px; font-weight: 800; letter-spacing: -1.2px; line-height: 1; color: var(--indigo); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ic-fx-t { margin: 10px 0 0; font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.ic-fx-d { margin: 6px 0 0; font-size: 13px; line-height: 1.55; color: var(--ink-soft); text-wrap: pretty; }
.ic-fx-op { display: grid; place-items: center; font-size: 22px; font-weight: 700; color: var(--ink-faint); }

/* ===== engine + service grids ===== */
.ic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 14px; margin-top: 34px; }
.ic-card { background: #fff; border: 1px solid #E5E5E2; border-radius: 13px; padding: 18px 19px 19px; position: relative; overflow: hidden; }
.ic-card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--ic-tint, #12805C); }
.ic-card-h { display: flex; align-items: center; gap: 9px; }
.ic-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 600; letter-spacing: .04em; color: var(--ic-tint, var(--indigo)); background: color-mix(in srgb, var(--ic-tint, var(--indigo)) 10%, transparent); border-radius: 5px; padding: 3px 6px; }
.ic-card b { display: block; font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); margin-top: 10px; }
.ic-card p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); text-wrap: pretty; }
.ic-card .ic-rule { margin: 10px 0 0; padding-top: 9px; border-top: 1px dashed #E5E5E2; font-size: 11.5px; line-height: 1.5; color: var(--ink-faint); font-style: italic; }

/* ===== the autonomy ladder ===== */
.ic-ladder { margin-top: 34px; display: grid; gap: 8px; }
.ic-rung { display: grid; grid-template-columns: 62px 200px 1fr; align-items: center; gap: 16px; padding: 13px 16px; border-radius: 11px; border: 1px solid #E5E5E2; background: #fff; position: relative; }
.ic-rung-l { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 600; color: #fff; background: var(--rung, #12805C); border-radius: 9px; padding: 4px 0; text-align: center; }
.ic-rung-n { font-size: 13.5px; font-weight: 800; letter-spacing: -.01em; }
.ic-rung-d { font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); }
/* the ladder climbs from observe (light) to act (deep) */
.ic-rung:nth-child(1) { --rung: #B4DCC8; } .ic-rung:nth-child(2) { --rung: #8CC7AC; }
.ic-rung:nth-child(3) { --rung: #5FB090; } .ic-rung:nth-child(4) { --rung: #3E9B78; }
.ic-rung:nth-child(5) { --rung: #12805C; } .ic-rung:nth-child(6) { --rung: #0D5B45; }
.ic-rung:nth-child(7) { --rung: #0D5B45; } .ic-rung:nth-child(8) { --rung: #0A4130; }
.ic-rung.is-gated { border-color: color-mix(in srgb, #8A5A12 34%, transparent); background: color-mix(in srgb, #8A5A12 3.5%, #fff); }
.ic-rung-tag { font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8A5A12; background: #FBF0DC; border-radius: 5px; padding: 3px 7px; margin-left: 8px; white-space: nowrap; }

/* ===== the agentic loop ===== */
.ic-loop { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 10px; margin-top: 32px; counter-reset: loop; }
.ic-step { background: #fff; border: 1px solid #E5E5E2; border-radius: 11px; padding: 15px 16px; position: relative; }
.ic-step::before { counter-increment: loop; content: counter(loop); position: absolute; top: 13px; right: 14px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 600; color: color-mix(in srgb, var(--indigo) 34%, transparent); }
.ic-step b { display: block; font-size: 13px; font-weight: 800; letter-spacing: -.01em; padding-right: 18px; }
.ic-step p { margin: 5px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-soft); }

/* ===== role split (planner / executor / verifier / watchdog) ===== */
.ic-roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 30px; }
.ic-role { border: 1px solid #E5E5E2; border-radius: 13px; padding: 17px 18px; background: #fff; }
.ic-role-ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; margin-bottom: 11px; background: var(--ro-w, #DCEDE6); color: var(--ro-t, var(--indigo)); }
.ic-role-ic .ms { font-size: 19px; }
.ic-role b { font-size: 14px; font-weight: 800; letter-spacing: -.01em; }
.ic-role p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); }

/* ===== domain packs ===== */
.ic-packs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.ic-pack { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px 7px 10px; }
.ic-pack code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9.5px; font-weight: 600; color: var(--indigo); background: color-mix(in srgb, var(--indigo) 9%, transparent); border-radius: 4px; padding: 2px 5px; }

/* ===== stat band ===== */
.ic-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; margin-top: 34px; background: #E5E5E2; border: 1px solid #E5E5E2; border-radius: 16px; overflow: hidden; }
.ic-stat { background: #fff; padding: 22px 20px; }
.ic-stat-v { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 30px; font-weight: 600; letter-spacing: -1px; line-height: 1; color: var(--indigo); }
.ic-stat-l { margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); line-height: 1.45; }

/* ===== capability columns ===== */
.ic-caps { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-top: 30px; }
.ic-cap { background: #fff; border: 1px solid #E5E5E2; border-radius: 13px; padding: 19px 20px; }
.ic-cap h3 { margin: 0 0 4px; font-size: 14px; font-weight: 800; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; }
.ic-cap h3 .n { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; font-weight: 600; color: var(--indigo); background: color-mix(in srgb, var(--indigo) 9%, transparent); border-radius: 999px; padding: 2px 8px; }
.ic-cap > p { margin: 0 0 12px; font-size: 12px; line-height: 1.5; color: var(--ink-faint); }
.ic-cap ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ic-cap li { font-size: 12.5px; font-weight: 600; color: var(--ink); display: flex; gap: 8px; align-items: flex-start; line-height: 1.45; }
.ic-cap li .ms { font-size: 14px; color: #12805C; flex: 0 0 auto; margin-top: 1px; }

/* ===== provenance ===== */
.ic-src { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; }
.ic-src span { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 650; color: var(--ink-soft); background: #fff; border: 1px solid #E5E5E2; border-radius: 999px; padding: 7px 14px; }
.ic-src i { width: 6px; height: 6px; border-radius: 50%; flex: none; }

/* ===== mockup framing ===== */
.ic-shot { margin-top: 34px; }
.ic-shot figcaption { margin-top: 14px; font-size: 12.5px; line-height: 1.55; color: var(--ink-faint); text-wrap: pretty; max-width: 760px; }

/* ===== pull quote ===== */
.ic-quote { margin: 36px 0 0; padding: 24px 28px; border-left: 3px solid var(--indigo); background: color-mix(in srgb, var(--indigo) 3.5%, #fff); border-radius: 0 13px 13px 0; }
.ic-quote p { margin: 0; font-size: 17.5px; line-height: 1.55; font-weight: 600; letter-spacing: -.015em; color: var(--ink); text-wrap: pretty; }
.ic-quote cite { display: block; margin-top: 11px; font-size: 12.5px; font-style: normal; font-weight: 700; color: var(--indigo); }

@media (max-width: 900px) {
  .ic-formula { grid-template-columns: 1fr; }
  .ic-fx-op { padding: 2px 0; }
  .ic-rung { grid-template-columns: 54px 1fr; }
  .ic-rung-d { grid-column: 1 / -1; }
}

/* ---------- from how-it-works.css ---------- */
/* How it works — detail-page styles. Loads after theme.css and reuses its
   base (header, buttons, .sec/.wrap/.kicker/.secsub, .cta-panel, .foot, fonts). */

/* ----- Breadcrumb + page hero ----- */
.crumbs { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; justify-content: center; }
.crumbs a { color: var(--ink-soft); }
.crumbs a:hover { color: var(--indigo); }
.crumbs span { color: var(--ink-faint); }
.crumbs .sep { opacity: .6; }

.page-hero { padding-top: 40px; padding-bottom: 4px; text-align: center; }
.page-hero h1 {
  font-size: clamp(31px, 4.6vw, 52px); line-height: 1.05; letter-spacing: -.03em;
  font-weight: 800; margin: 18px auto 0; max-width: 900px; color: var(--ink);
}
.page-hero .secsub { margin-top: 20px; font-size: 17.5px; max-width: 740px; margin-left: auto; margin-right: auto; }

/* ----- Overview pillars ----- */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 42px; }
.pillar { background: #FAFAF9; border: 1px solid #E5E5E2; border-radius: 20px; padding: 24px 22px; }
.pillar-ic { width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
.pillar-ic .ms { font-size: 24px; }
.pillar b { display: block; font-size: 18px; font-weight: 800; letter-spacing: -.01em; margin: 16px 0 7px; color: var(--ink); }
.pillar p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-soft); text-wrap: pretty; }

/* ----- Data model (master vs transactional) ----- */
.dm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 40px; }
.dm-card { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 26px 26px 14px; }
.dm-h { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.dm-ic { width: 42px; height: 42px; border-radius: 13px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.dm-ic .ms { font-size: 22px; }
.dm-h b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.dm-h .dm-sub { font-size: 12.5px; color: var(--ink-faint); font-weight: 600; }
.dm-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid #F1F1EF; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.dm-row .ms { font-size: 19px; flex: 0 0 auto; }
.dm-row .dm-d { margin-left: auto; font-weight: 500; font-size: 13px; color: var(--ink-faint); text-align: right; }
.dm-note { margin-top: 28px; font-size: 15px; line-height: 1.68; color: var(--ink-soft); max-width: 860px; text-wrap: pretty; }
.dm-note b { color: var(--ink); font-weight: 700; }

/* ----- Where the two processes meet ----- */
.connect-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; }
.connect-card { background: #FAFAF9; border: 1px solid #E5E5E2; border-radius: 20px; padding: 26px 24px; }
.connect-ic { width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
.connect-ic .ms { font-size: 24px; }
.connect-card b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.01em; margin: 16px 0 8px; color: var(--ink); }
.connect-card p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); text-wrap: pretty; }

/* ----- Hover lift to match the rest of the site ----- */
.pillar, .dm-card, .connect-card { transition: translate .32s cubic-bezier(.34, 1.56, .64, 1); }
.pillar:hover, .connect-card:hover { translate: 0 -4px; }
@media (prefers-reduced-motion: reduce) {
  .pillar:hover, .connect-card:hover { translate: none; }
}

/* ----- Responsive ----- */
@media (max-width: 960px) {
  .pillars { grid-template-columns: repeat(2, 1fr); }
  .dm-grid { grid-template-columns: 1fr; }
  .connect-grid { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .pillars { grid-template-columns: 1fr; }
}

/* ---------- from cycle.css ---------- */
/* ===========================================================================
   Cycle diagram styling (paired with cycle.js). Appearance only — positions
   and the flank/stack switch are applied by cycle.js. The ring's hub/nodes
   are sized in container-query units (cqw) so they scale with the ring; the
   detail boxes use fixed sizes (the JS keeps them wide enough on desktop and
   full-width when stacked).
   =========================================================================== */
.cyc { position: relative; width: 100%; max-width: 1100px; margin: 30px auto 0;  container-type: inline-size; }
.cyc-svg, .cyc-conn { pointer-events: none; }
.cyc-prog { transition: none; }

/* ----- ring (square; children scale with it) ----- */
.cyc-ring { container-type: inline-size; }
.cyc-hub {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 43cqw; height: 43cqw; border-radius: 50%; background: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  box-shadow: 0 8px 26px rgba(80, 70, 200, .14), 0 2px 8px rgba(20, 18, 40, .06);
  border: 1px solid #F1F1EF; z-index: 3;
}
.cyc-hub-ic { width: 13.3cqw; height: 13.3cqw; border-radius: 4cqw; background: #FAFAF9; display: flex; align-items: center; justify-content: center; margin-bottom: 2cqw; }
.cyc-hub-ic svg { width: 6.4cqw; height: 6.4cqw; }
.cyc-hub-t { font-size: 4.7cqw; font-weight: 700; color: #16181A; letter-spacing: -0.2px; line-height: 1.12; }
.cyc-hub-s { font-size: 3.5cqw; font-weight: 600; color: #6B7075; margin-top: 1cqw; }

.cyc-node {
  position: absolute; transform: translate(-50%, -50%) scale(1);
  width: 18.8cqw; height: 18.8cqw; border-radius: 5.4cqw;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(20, 18, 40, .08);
  transition: transform .5s cubic-bezier(.34, 1.4, .5, 1), box-shadow .5s; z-index: 3;
}
.cyc-node svg { width: 8.2cqw; height: 8.2cqw; }
.cyc-node.on { transform: translate(-50%, -50%) scale(1.1); }
/* Labels live in the full canvas (not the ring), so they scale with .cyc */
.cyc-label {
  position: absolute; white-space: nowrap; font-size: 1.3cqw; font-weight: 700;
  letter-spacing: -0.2px; line-height: 1.1; color: #5F6368; transition: color .4s; z-index: 3;
}
.cyc-label.on { color: var(--deep); }

/* ----- detail boxes ----- */
.cyc-box {
  background: #fff; border-radius: 18px; border: 1px solid #EFEFEC;
  box-shadow: 0 1px 2px rgba(20, 18, 40, .04), 0 14px 30px rgba(20, 18, 40, .08);
  padding: 16px; box-sizing: border-box; display: flex; flex-direction: column;
  max-width: 430px;
  opacity: 0; transform: translateY(7px) scale(.985);
  transition: opacity .24s ease-out, transform .3s cubic-bezier(.22, .61, .36, 1); z-index: 4;
}
.cyc-box.on { opacity: 1; transform: translateY(0) scale(1); }
.cyc-box-h { display: flex; align-items: center; gap: 11px; margin-bottom: 8px; }
.cyc-box-n { width: 30px; height: 30px; border-radius: 9px; color: #fff; font-size: 14px; font-weight: 700; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.cyc-box-t { font-size: 16.5px; font-weight: 700; color: #16181A; letter-spacing: -0.3px; }
.cyc-box-b { font-size: 12.5px; line-height: 1.45; color: #5F6368; text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: auto; }
.cyc-box-f { margin-top: 9px; }

/* When stacked (mobile), the ring's side labels would overflow the small circle —
   the titles already show on each stacked box below, so hide them there. */
@media (max-width: 1000px) {
  .cyc-label { display: none; }
  /* Stacked boxes are content here, not a ring-synced reveal — keep every step
     fully readable regardless of how far the (desktop) animation has progressed. */
  .cyc-box, .cyc-box.on { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cyc-node, .cyc-label, .cyc-box { transition: none; }
}

/* Crawlable fallback inside .cyc[data-proc]: the four process stages as plain
   HTML. cycle.js overwrites the container when it runs, so this is only ever
   seen by crawlers, by no-JS visitors, and briefly before the script executes. */
.cyc-fallback { margin: 0; padding: 0 0 0 22px; max-width: 780px; }
.cyc-fallback li { margin: 0 0 14px; font-size: 15px; line-height: 1.65; color: var(--ink-soft); }
.cyc-fallback li b { color: var(--ink); font-weight: 800; }