/* AlumniAI.ai — PRODUCT mega-menu and product page layouts.
   Loaded alongside style.css and home-v2.css; reuses the hv-* type primitives
   from home-v2.css and only adds what the product pages need. */

/* ============ PRODUCT mega-menu ============ */

/* The item has to fill the header's full height, otherwise the pointer leaves
   it in the gap below the link and the panel closes before it can be reached.
   The list only wraps its links, so it has to fill the header first. */
.nav-links { align-self: stretch; }
li.dropdown:has(.mega) {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
}

.mega {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-42%);
  width: 660px;
  max-width: calc(100vw - 32px);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 24px 48px rgba(10, 22, 40, .12);
  overflow: hidden;
}
li.dropdown:hover .mega,
li.dropdown:focus-within .mega { display: block; }

.mega-inner {
  padding: 20px 22px 16px;
  display: grid;
  grid-template-columns: 0.95fr 1.15fr 0.8fr;
  gap: 4px 28px;
}
.mega-col + .mega-col {
  border-left: 1px solid var(--border);
  padding-left: 24px;
}

.mega-col-title {
  display: block;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--navy);
  padding-bottom: 4px;
}
a.mega-col-title:hover { color: var(--cyan-dark); }
.mega-col-note {
  font-size: .78rem;
  line-height: 1.5;
  color: var(--text-light);
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.mega-list { list-style: none; margin: 0; padding: 0; }
.mega-list a {
  display: block;
  padding: 8px 10px;
  margin-left: -10px;
  border-radius: var(--radius-sm);
  color: var(--text);
}
.mega-list a:hover { background: var(--cyan-light); }
.mega-label {
  display: block;
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.35;
}
.mega-list a:hover .mega-label { color: var(--cyan-dark); }
.mega-more a .mega-label { color: var(--cyan-dark); font-weight: 700; }
.mega-desc {
  display: block;
  font-size: .75rem;
  line-height: 1.4;
  color: var(--text-light);
  margin-top: 1px;
}
.mega-foot {
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
  padding: 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: .82rem;
  font-weight: 600;
}
.mega-foot a { color: var(--cyan-dark); }

/* Fallback links shown before nav.js runs, and if it never does. */
.mega:not(.is-ready) { padding: 8px; }
.mega:not(.is-ready) ul { list-style: none; margin: 0; padding: 0; }
.mega:not(.is-ready) a {
  display: block;
  padding: 10px 14px;
  font-size: .88rem;
  color: var(--text);
  border-radius: var(--radius-sm);
}

@media (max-width: 900px) {
  /* Back to a stacked accordion: the panel sits below the link, not beside it. */
  li.dropdown:has(.mega) {
    display: block;
    align-self: auto;
  }
  .mega {
    position: static;
    display: none;
    width: auto;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }
  li.dropdown:hover .mega,
  li.dropdown:focus-within .mega { display: none; }
  li.dropdown.is-open .mega { display: block; }
  .mega-inner { padding: 12px 0 8px; grid-template-columns: 1fr; gap: 14px; }
  .mega-col + .mega-col { border-left: none; padding-left: 0; }
  .mega-col-note { display: none; }
  .mega-foot { background: none; padding: 12px 0 4px; }
}

/* ============ Product page shell ============ */

.pp-hero {
  padding: 72px 24px 56px;
  background: linear-gradient(180deg, var(--bg-soft) 0%, #fff 100%);
  border-bottom: 1px solid var(--border);
}
.pp-hero-wrap { max-width: var(--max-width); margin: 0 auto; }
.pp-kicker {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cyan-dark);
  margin-bottom: 14px;
}
.pp-h1 {
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  font-weight: 800;
  line-height: 1.12;
  color: var(--navy);
  letter-spacing: -.02em;
}
.pp-lede {
  margin-top: 18px;
  max-width: 720px;
  font-size: 1.08rem;
  line-height: 1.65;
  color: var(--text-mid);
}
.pp-hero-btns { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; }

.pp-body { max-width: var(--max-width); margin: 0 auto; padding: 64px 24px 76px; }
.pp-body > * + .hv-cap-block { margin-top: 48px; }

/* Sticky jump bar for the long capabilities page */
.pp-jump {
  position: sticky;
  top: 76px;
  z-index: 20;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  padding: 12px 24px;
}
.pp-jump-wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.pp-jump-wrap::-webkit-scrollbar { display: none; }
.pp-jump-wrap a {
  flex-shrink: 0;
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-mid);
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 9999px;
  white-space: nowrap;
}
.pp-jump-wrap a:hover { border-color: var(--cyan); color: var(--cyan-dark); background: var(--cyan-light); }

/* ============ Capability blocks (capabilities.html) ============ */

/* Offset anchors so the sticky header and jump bar don't cover headings. */
.hv-cap-block, .hv-agent-block { scroll-margin-top: 140px; }

.hv-cap-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--navy);
}
.hv-cap-num {
  font-size: .78rem;
  font-weight: 800;
  color: var(--cyan-dark);
  font-variant-numeric: tabular-nums;
}
.hv-cap-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -.01em;
}
.hv-cap-count {
  margin-left: auto;
  font-size: .74rem;
  font-weight: 600;
  color: var(--text-light);
  white-space: nowrap;
}

.hv-cap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 16px;
}
.hv-cap-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  background: #fff;
}
.hv-cap-item h4 {
  font-size: .95rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
}
.hv-cap-item p {
  font-size: .84rem;
  line-height: 1.55;
  color: var(--text-mid);
}
/* AI-Powered features carry the accent so the AI density is visible at a glance. */
.hv-cap-item.is-ai {
  border-color: rgba(0, 168, 232, .38);
  background: linear-gradient(180deg, var(--cyan-light) 0%, #fff 70%);
}
.hv-cap-item.is-ai h4::before {
  content: 'AI';
  display: inline-block;
  margin-right: 7px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--cyan-dark);
  color: #fff;
  font-size: .62rem;
  font-weight: 800;
  vertical-align: 1px;
}
.hv-cap-from {
  display: block;
  margin-top: 10px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-light);
}

/* ============ Agent blocks (ai-workforce.html) ============ */

.hv-agent-block {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 40px;
  padding: 40px 0;
  border-top: 1px solid var(--border);
}
.hv-agent-block:first-of-type { border-top: none; }
.hv-agent-copy { position: sticky; top: 110px; align-self: start; }
.hv-agent-name {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -.02em;
}
.hv-agent-claim {
  margin-top: 8px;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--cyan-dark);
  line-height: 1.45;
}
.hv-agent-blurb {
  margin-top: 14px;
  font-size: .9rem;
  line-height: 1.65;
  color: var(--text-mid);
}
.hv-agent-suite {
  display: inline-block;
  margin-top: 16px;
  font-size: .74rem;
  font-weight: 700;
  color: var(--text-mid);
  border: 1px solid var(--border);
  border-radius: 9999px;
  padding: 5px 12px;
}
.hv-agent-suite:hover { border-color: var(--cyan); color: var(--cyan-dark); }

.hv-agent-feats { min-width: 0; }
.hv-agent-feats-cap {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 14px;
}
.hv-agent-feats .hv-cap-item + .hv-cap-item { margin-top: 12px; }

@media (max-width: 860px) {
  .hv-agent-block { grid-template-columns: 1fr; gap: 22px; padding: 30px 0; }
  .hv-agent-copy { position: static; }
  .hv-cap-grid { grid-template-columns: 1fr; }
  .pp-jump { top: 0; }
}

/* ============ Shared product blocks ============ */

.pp-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 28px;
}
.pp-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 26px;
  background: #fff;
}
.pp-card h3 {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 6px;
}
.pp-card .pp-card-sub {
  font-style: italic;
  color: var(--cyan-dark);
  font-size: .92rem;
  margin-bottom: 14px;
}
.pp-card p { font-size: .9rem; line-height: 1.65; color: var(--text-mid); margin-bottom: 10px; }
.pp-card ul { margin: 12px 0 0 18px; }
.pp-card li { font-size: .87rem; line-height: 1.75; color: var(--text-mid); }
.pp-card-note {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: .84rem;
  line-height: 1.6;
  color: var(--text-light);
}

.pp-h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -.015em;
  margin-top: 56px;
}
.pp-h2 + p { margin-top: 12px; font-size: .98rem; line-height: 1.7; color: var(--text-mid); max-width: 800px; }

.pp-quote {
  margin-top: 48px;
  padding: 32px 34px;
  background: var(--navy);
  border-radius: var(--radius);
  color: #fff;
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  font-weight: 700;
  line-height: 1.5;
}
.pp-quote .accent { color: var(--cyan); }

.pp-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 24px;
}
.pp-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--navy);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.pp-check svg { width: 16px; height: 16px; color: var(--cyan-dark); flex-shrink: 0; }

@media (max-width: 760px) {
  .pp-split { grid-template-columns: 1fr; }
  .pp-hero { padding: 48px 20px 40px; }
  .pp-body { padding: 44px 20px 56px; }
}

/* ============ Prospect Agent page (prospect-agent.html) ============ */

/* Each block pairs the narrative with a static picture of the real screen, so
   the copy on the left and the UI on the right must stay side by side until
   the viewport is too narrow for the panel to stay legible. */
.pa-block {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 40px;
  padding: 48px 0;
  border-top: 1px solid var(--border);
  scroll-margin-top: 140px;
}
.pa-block:first-of-type { border-top: none; padding-top: 8px; }

.pa-copy { position: sticky; top: 110px; align-self: start; }
.pa-step {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cyan-dark);
}
.pa-copy h2 {
  margin-top: 10px;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--navy);
}
.pa-claim {
  margin-top: 8px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--cyan-dark);
}
.pa-copy p:not(.pa-claim) {
  margin-top: 14px;
  font-size: .9rem;
  line-height: 1.65;
  color: var(--text-mid);
}
.pa-facts { list-style: none; margin: 16px 0 0; padding: 0; }
.pa-facts li {
  position: relative;
  padding-left: 16px;
  font-size: .85rem;
  line-height: 1.6;
  color: var(--text-mid);
}
.pa-facts li + li { margin-top: 7px; }
.pa-facts li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cyan);
}

/* Screen mock shell */
.pa-ui { min-width: 0; }
.pa-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.pa-panel + .pa-panel { margin-top: 16px; }
.pa-panel-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
  font-size: .76rem;
  font-weight: 700;
  color: var(--navy);
}
.pa-panel-bar .pa-panel-note {
  margin-left: auto;
  font-weight: 600;
  color: var(--text-light);
}
.pa-panel-body { padding: 16px; }
.pa-field-label {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-light);
}
.pa-field-label + * { margin-top: 8px; }
.pa-row + .pa-field-label { margin-top: 18px; }

/* Fake inputs and chips */
.pa-input {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  font-size: .85rem;
  line-height: 1.6;
  color: var(--text);
  background: #fff;
}
.pa-input.is-prompt { color: var(--text); min-height: 66px; }
.pa-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.pa-chip {
  display: inline-block;
  border: 1px solid rgba(0, 168, 232, .34);
  background: var(--cyan-light);
  color: var(--cyan-dark);
  border-radius: 9999px;
  padding: 4px 11px;
  font-size: .75rem;
  font-weight: 600;
}
.pa-chip.is-plain {
  border-color: var(--border);
  background: #fff;
  color: var(--text-mid);
}
.pa-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.pa-btn {
  display: inline-block;
  border-radius: var(--radius-sm);
  padding: 9px 16px;
  font-size: .8rem;
  font-weight: 700;
  background: var(--cyan-dark);
  color: #fff;
}
.pa-btn.is-ghost {
  background: #fff;
  color: var(--text-mid);
  border: 1px solid var(--border);
}
.pa-meta {
  font-size: .76rem;
  font-weight: 600;
  color: var(--text-light);
}

/* Pipeline stages */
.pa-stages { display: flex; flex-wrap: wrap; gap: 8px; }
.pa-stage {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border);
  border-radius: 9999px;
  padding: 5px 12px;
  font-size: .74rem;
  font-weight: 700;
  color: var(--text-light);
}
.pa-stage.is-done { border-color: rgba(0, 168, 232, .34); color: var(--cyan-dark); background: var(--cyan-light); }
.pa-stage.is-active { border-color: var(--navy); color: var(--navy); }
.pa-stage b { font-variant-numeric: tabular-nums; font-weight: 800; }

/* Result rows: ranked candidates and imported leads */
.pa-list { display: flex; flex-direction: column; }
.pa-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 13px 0;
  border-top: 1px solid var(--border);
}
.pa-item:first-child { border-top: none; padding-top: 4px; }
.pa-rank {
  font-size: .8rem;
  font-weight: 800;
  color: var(--text-light);
  font-variant-numeric: tabular-nums;
}
.pa-item-name {
  display: block;
  font-size: .88rem;
  font-weight: 700;
  color: var(--navy);
}
.pa-item-why {
  display: block;
  margin-top: 3px;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--text-mid);
}
.pa-scores { display: flex; align-items: center; gap: 14px; text-align: right; }
.pa-score b {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.pa-score span {
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-light);
}

/* Segment recommendation cards */
.pa-seg {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
}
.pa-seg + .pa-seg { margin-top: 10px; }
.pa-seg.is-ai { border-color: rgba(0, 168, 232, .38); background: linear-gradient(180deg, var(--cyan-light) 0%, #fff 72%); }
.pa-seg-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pa-seg-head b { font-size: .9rem; color: var(--navy); }
.pa-seg-count {
  margin-left: auto;
  font-size: .8rem;
  font-weight: 800;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.pa-seg-why {
  margin-top: 7px;
  font-size: .79rem;
  line-height: 1.55;
  color: var(--text-mid);
}
.pa-seg-crit {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  font-size: .75rem;
  line-height: 1.6;
  color: var(--text-light);
}
.pa-seg-actions { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.pa-toggle {
  display: inline-block;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-size: .74rem;
  font-weight: 700;
  color: var(--text-mid);
  background: #fff;
}
.pa-toggle.is-on { border-color: var(--cyan-dark); color: var(--cyan-dark); background: var(--cyan-light); }

.pa-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.pa-summary div {
  flex: 1 1 120px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.pa-summary span {
  display: block;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-light);
}
.pa-summary b {
  display: block;
  margin-top: 3px;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

/* Dimension bars */
.pa-dims { display: flex; flex-direction: column; gap: 11px; }
.pa-dim {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 38px;
  gap: 12px;
  align-items: center;
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-mid);
}
.pa-bar { display: block; height: 7px; border-radius: 9999px; background: var(--border); overflow: hidden; }
.pa-bar i { display: block; height: 100%; border-radius: 9999px; background: var(--cyan); }
.pa-dim b {
  text-align: right;
  font-weight: 800;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

/* Evidence list */
.pa-ev { list-style: none; margin: 0; padding: 0; }
.pa-ev li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  padding: 10px 0;
  border-top: 1px dashed var(--border);
  font-size: .8rem;
  line-height: 1.55;
  color: var(--text-mid);
}
.pa-ev li:first-child { border-top: none; }
.pa-ev-src {
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-light);
  white-space: nowrap;
}

/* Boundary note: what this agent does not decide */
.pa-boundary {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.pa-boundary div {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  background: #fff;
}
.pa-boundary div.is-next { background: var(--bg-soft); }
.pa-boundary h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 8px;
}
.pa-boundary p { font-size: .87rem; line-height: 1.65; color: var(--text-mid); }
.pa-boundary a {
  display: inline-block;
  margin-top: 12px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--cyan-dark);
}

@media (max-width: 900px) {
  .pa-block { grid-template-columns: 1fr; gap: 24px; padding: 34px 0; }
  .pa-copy { position: static; }
  .pa-boundary { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .pa-item { grid-template-columns: 26px minmax(0, 1fr); }
  .pa-scores { grid-column: 2; justify-content: flex-start; text-align: left; }
  .pa-dim { grid-template-columns: 76px minmax(0, 1fr) 34px; gap: 8px; }
}