/* ============================================================
   JIIVE — ABOUT (v3 · gold period)
   Sections, in order: hero (statement over the helix art), our
   story (ledger head + copy), principles (numbered list), what
   Jiive does (statement), normal vs optimal (ledger-compare),
   closing statement, team (ledger-team). Copy: CONTENT.md 4.2.
   ============================================================ */

/* ---------- Hero (statement over background art) ---------- */
.ab-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: calc(var(--space-hero-top) + var(--space-section-tight)) 0 var(--space-section);
}
.ab-hero-art {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 62%;
  z-index: -1;
  /* fade in from the copy side and out before the hero ends, so the art never shows an edge */
  -webkit-mask-image: linear-gradient(to right, transparent, var(--color-emerald-ink) 45%), linear-gradient(to bottom, var(--color-emerald-ink) 55%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, var(--color-emerald-ink) 45%), linear-gradient(to bottom, var(--color-emerald-ink) 55%, transparent);
  mask-composite: intersect;
}
.ab-hero-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 85% 50%;
}
.ab-hero-copy { grid-column: 1 / span 8; }
.ab-hero h1 {
  margin-top: var(--space-lg);
  font-size: var(--text-page-title);
  line-height: var(--leading-display);
}
.ab-lead {
  margin: var(--space-lg) 0 0;
  max-width: var(--measure);
  font-size: var(--text-lead);
  line-height: var(--leading-copy);
  color: var(--color-text-secondary);
}

/* ---------- Our story: ledger head on 1–3, copy on 5–11 ---------- */
.ab-story {
  position: relative;
  padding-top: var(--space-lg);
  border-top: var(--size-hairline) solid var(--color-emerald-ink);
}
.ab-story::before,
.ab-story::after {
  content: "";
  position: absolute;
  top: calc(-1 * var(--size-hairline));
  width: var(--size-hairline);
  height: var(--size-ledger-tick);
  background: var(--color-emerald-ink);
}
.ab-story::before { left: 0; }
/* the second tick marks column 5, where the copy starts */
.ab-story::after { left: calc((100% + var(--grid-gutter)) / 3); }
.ab-runhead { grid-column: 1 / span 3; padding-top: var(--space-xs); }
.ab-story-body { grid-column: 5 / span 7; }
.ab-story-body p:not(.pull) { margin: var(--space-md) 0 0; max-width: var(--measure); }
.ab-story-body .pull { margin: var(--space-block) 0 var(--space-lg); }

/* ---------- Principles: head above, numbered list across 1–12 ---------- */
.ab-beliefs-head { grid-column: 1 / span 9; }
.ab-beliefs { grid-column: 1 / -1; margin-top: var(--space-block); }

/* ---------- What Jiive does: head on 1–5, copy on 7–12, sharing a baseline edge ---------- */
.ab-does { align-items: end; }
.ab-does-head { grid-column: 1 / span 5; }
.ab-does-head .sec-head { margin-top: var(--space-md); }
.ab-does-copy { grid-column: 7 / -1; }
.ab-intro {
  margin: 0;
  max-width: var(--measure);
  font-size: var(--text-intro);
  line-height: var(--leading-copy);
  color: var(--color-emerald-deep);
}
.ab-does-copy p + p { margin: var(--space-md) 0 0; max-width: var(--measure); color: var(--color-text-secondary); }

/* ---------- Normal vs optimal: ledger-compare across 1–12 ---------- */
.ab-vs-head { grid-column: 1 / span 9; }
.ab-vs { grid-column: 1 / -1; margin-top: var(--space-block); }
.cmp {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  border-bottom: var(--size-hairline) solid var(--color-emerald-ink);
}
.cmp caption { display: table-caption; caption-side: top; }
.cmp th,
.cmp td {
  position: relative;
  padding: var(--space-md) var(--space-lg);
  text-align: left;
  vertical-align: top;
}
.cmp th {
  font-family: var(--font-mono);
  font-weight: var(--weight-mono);
  font-size: var(--text-field-label);
  letter-spacing: var(--tracking-label);
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.cmp td {
  border-top: var(--size-hairline) solid var(--color-border);
  font-size: var(--text-card-title);
  line-height: var(--leading-snug);
  color: var(--color-emerald-ink);
}
.cmp th:first-child, .cmp td:first-child { padding-left: 0; }
/* the Jiive column: a surface strip with a hairline outline and rounded ends */
.cmp .cmp-jiive {
  background: var(--color-surface);
  border-left: var(--size-hairline) solid var(--color-border);
  border-right: var(--size-hairline) solid var(--color-border);
}
.cmp th.cmp-jiive {
  border-top: var(--size-hairline) solid var(--color-border);
  border-radius: var(--radius-input) var(--radius-input) 0 0;
  color: var(--color-emerald-ink);
}
.cmp tr:last-child td.cmp-jiive {
  border-bottom: var(--size-hairline) solid var(--color-border);
  border-radius: 0 0 var(--radius-input) var(--radius-input);
}
.cmp tbody tr:last-child td { padding-bottom: var(--space-lg); }
.cmp-cell { display: flex; align-items: flex-start; gap: var(--space-sm); }
.cmp-cell svg { flex: none; width: var(--size-icon-md); height: var(--size-icon-md); margin-top: 0.1em; }
.cmp-cross { color: var(--color-text-secondary); }
.cmp-tick { color: var(--color-vital-green); }
.ab-note {
  margin: var(--space-md) 0 0;
  max-width: var(--measure);
  font-size: var(--text-caption);
  line-height: var(--leading-copy);
  color: var(--color-text-secondary);
}

/* ---------- Closing statement: line on 1–7, answer on 8–12 ---------- */
.ab-closing {
  align-items: end;
  padding-top: var(--space-section-tight);
  border-top: var(--size-hairline) solid var(--color-border);
}
.ab-closing-head {
  grid-column: 1 / span 7;
  font-size: var(--text-page-title);
  line-height: var(--leading-display);
}
.ab-closing-aside { grid-column: 9 / -1; }
.ab-closing-aside .btn { margin-top: var(--space-lg); }

/* ---------- Team: head on 1–4, ledger-team on 5–12 ---------- */
.ab-team-head { grid-column: 1 / span 4; }
.ab-team { grid-column: 5 / -1; }
.team {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: var(--size-hairline) solid var(--color-emerald-ink);
}
.team li {
  display: grid;
  grid-template-columns: var(--size-avatar) minmax(0, 1fr) auto;
  column-gap: var(--grid-gutter);
  align-items: center;
  padding: var(--space-md) 0;
  border-top: var(--size-hairline) solid var(--color-border);
}
.team-well {
  display: grid;
  place-items: center;
  width: var(--size-avatar);
  aspect-ratio: 1;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  border: var(--size-hairline) solid var(--color-border);
  font-family: var(--font-mono);
  font-weight: var(--weight-mono);
  font-size: var(--text-mono-meta);
  letter-spacing: var(--tracking-meta);
  color: var(--color-text-secondary);
}
.team-name {
  font-family: var(--font-body);
  font-weight: var(--weight-strong);
  font-size: var(--text-card-title);
  line-height: var(--leading-snug);
  letter-spacing: 0;
}
/* a member's name, with their profile links beside it when they have them */
.team-who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--space-md);
  min-width: 0;
}
/* brand marks (LinkedIn, X) and the set's globe; each link is a full tap target */
/* the negative margins line the first icon up with the name when the links wrap below it */
.team-links {
  display: flex;
  margin: calc((var(--size-icon-md) - var(--size-tap)) / 2) 0 calc((var(--size-icon-md) - var(--size-tap)) / 2) calc((var(--size-icon-md) - var(--size-tap)) / 2);
}
.team-links a {
  display: inline-grid;
  place-items: center;
  width: var(--size-tap);
  height: var(--size-tap);
  border-radius: var(--radius-pill);
  color: var(--color-emerald-deep);
  transition: transform var(--dur-200) var(--ease-out), color var(--dur-120) var(--ease-out);
}
.team-links a:active { transform: scale(var(--motion-press)); transition-duration: var(--dur-120); }
.team-links svg { width: var(--size-icon-md); height: var(--size-icon-md); }
.team-links .team-mark { width: var(--size-icon-sm); height: var(--size-icon-sm); }
@media (hover: hover) and (pointer: fine) {
  .team-links a:hover { color: var(--color-vital-green); }
}
.team-role {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: var(--weight-mono);
  font-size: var(--text-mono-meta);
  letter-spacing: var(--tracking-meta);
  line-height: var(--leading-snug);
  text-transform: uppercase;
  text-align: right;
  color: var(--color-text-secondary);
}

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
  .ab-hero-copy,
  .ab-runhead, .ab-story-body,
  .ab-beliefs-head,
  .ab-does-head, .ab-does-copy,
  .ab-vs-head,
  .ab-closing-head, .ab-closing-aside,
  .ab-team-head, .ab-team { grid-column: 1 / -1; }
  .ab-story::after { display: none; }
  .ab-story-body { margin-top: var(--space-lg); }
  .ab-closing-aside { margin-top: var(--space-lg); }
  .ab-team { margin-top: var(--space-block); }
  .ab-does-copy { margin-top: var(--space-lg); }
}
/* phones: the art leaves the copy and sits beneath it, faded at both ends */
@media (max-width: 760px) {
  .ab-hero { display: flex; flex-direction: column; padding-bottom: 0; }
  .ab-hero-art {
    position: relative;
    order: 2;
    width: 100%;
    aspect-ratio: 1;
    margin-top: var(--space-lg);
    -webkit-mask-image: linear-gradient(to bottom, transparent, var(--color-emerald-ink) 30%, var(--color-emerald-ink) 65%, transparent);
    mask-image: linear-gradient(to bottom, transparent, var(--color-emerald-ink) 30%, var(--color-emerald-ink) 65%, transparent);
  }
  .ab-hero-art img { object-position: 50% 45%; }
}
@media (max-width: 600px) {
  .cmp, .cmp tbody, .cmp tr, .cmp td { display: block; width: 100%; }
  .cmp caption { display: block; }
  .cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cmp tr { padding: var(--space-md) 0; border-top: var(--size-hairline) solid var(--color-border); }
  .cmp td,
  .cmp td:first-child,
  .cmp tbody tr:last-child td { padding: var(--space-sm) 0; border: 0; }
  .cmp td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: var(--space-xs);
    font-family: var(--font-mono);
    font-weight: var(--weight-mono);
    font-size: var(--text-mono-meta);
    letter-spacing: var(--tracking-meta);
    line-height: var(--leading-snug);
    text-transform: uppercase;
    color: var(--color-text-secondary);
  }
  .cmp td.cmp-jiive,
  .cmp tr:last-child td.cmp-jiive {
    margin-top: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    border: var(--size-hairline) solid var(--color-border);
    border-radius: var(--radius-input);
  }
  .team li { grid-template-columns: var(--size-avatar) minmax(0, 1fr); row-gap: var(--space-xxs); }
  .team-well { grid-row: 1 / span 2; }
  .team-who { align-self: end; }
  .team-role { grid-column: 2; align-self: start; text-align: left; }
}