/* ============================================================
   Message Polly v2 — Linear/Attio-inspired structure.
   Additive: loads after tokens.css, touches only .ix/.chap/.fig/.sub
   ============================================================ */

/* ---------- indexed part headers: [01] The blind spot   / ads × ai × signals */
.ix-sect { padding: 0 0 96px; position: relative; }
.ixhead {
  border-top: 1px solid var(--hairline);
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 14px 0 0;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate);
}
.ixhead h2 { font: inherit; letter-spacing: inherit; display: flex; gap: 8px; margin: 0; white-space: nowrap; }
.ixhead .ix-n { color: #B5AFA3; font-weight: 400; }
.ixhead .ix-r { white-space: nowrap; }
@media (max-width: 560px) { .ixhead .ix-r { display: none; } }

/* ---------- two-tone statement (Attio) ---------- */
.stmt {
  max-width: 27em; padding: 72px 0 60px;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(25px, 3.3vw, 40px); line-height: 1.16; letter-spacing: -0.022em;
  text-wrap: pretty;
}
.stmt h3 { display: inline; font: inherit; letter-spacing: inherit; color: var(--ink); }
.stmt p { display: inline; font: inherit; letter-spacing: inherit; color: color-mix(in srgb, var(--slate) 75%, var(--ink)); max-width: none; }
.stmt.center { margin: 0 auto; text-align: center; }

/* ---------- fig triad (Linear FIG cards) ---------- */
.figs { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--hairline); }
.fig { padding: 28px 30px 30px 0; min-width: 0; }
.fig + .fig { border-left: 1px solid var(--hairline); padding-left: 30px; }
@media (max-width: 760px) {
  .figs { grid-template-columns: 1fr; }
  .fig { padding-right: 0; }
  .fig + .fig { border-left: none; border-top: 1px solid var(--hairline); padding-left: 0; }
}
.fig-k { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; color: #B5AFA3; }
.fig h3 { font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: -0.014em; margin: 12px 0 8px; }
.fig p { font-size: 14.5px; color: var(--slate); line-height: 1.55; max-width: 36ch; text-wrap: pretty; }
.fig-art { margin-top: 20px; min-height: 26px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fig-mono { font-family: var(--mono); font-size: 11.5px; color: var(--slate); letter-spacing: 0.01em; white-space: nowrap; }
.fig-mono b { font-weight: 600; color: var(--ink); }
.fig-mono .fm-ember { color: var(--ember); font-weight: 500; }
.fig-mono .fm-green { color: var(--green); font-weight: 500; }

/* ---------- chapters (Linear: copy + code, canvas, sub-index) ---------- */
.chap { padding: 0 0 56px; position: relative; }
.chap .ixrule { border-top: 1px solid var(--hairline); }
.chap-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; padding: 60px 0 36px; }
@media (max-width: 700px) { .chap-top { flex-direction: column; align-items: flex-start; gap: 18px; padding-top: 44px; } }
.chap-copy h2 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(28px, 3.6vw, 44px); letter-spacing: -0.026em; line-height: 1.08;
  max-width: 18ch; text-wrap: balance; margin: 0;
}
.chap-copy p { margin-top: 14px; color: var(--slate); font-size: 16.5px; line-height: 1.55; max-width: 56ch; text-wrap: pretty; }
.chap-copy p strong { color: var(--ink); font-weight: 600; }
.chap-code {
  font-family: var(--mono); font-size: 12.5px; color: var(--ink); white-space: nowrap;
  display: inline-flex; align-items: baseline; gap: 7px; flex-shrink: 0; padding-bottom: 8px;
}
.chap-code .cc-n { color: #B5AFA3; }
.chap-code .cc-a { display: inline-block; transition: transform 0.2s ease; }
.chap:hover .chap-code .cc-a { transform: translateX(3px); }

.chap-canvas {
  border: 1px solid var(--hairline); border-radius: 18px;
  padding: clamp(28px, 5vw, 56px) clamp(16px, 4vw, 48px);
  background-color: #FCFBF9;
  background-image: radial-gradient(rgba(27, 26, 23, 0.065) 1px, transparent 1.4px);
  background-size: 22px 22px; background-position: center top;
  position: relative;
}
.chap-canvas .canvas-inner { max-width: 640px; margin: 0 auto; }

/* sub-feature index: 01 CAPI events + (expandable) */
.subs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 28px; margin-top: 24px; align-items: start; }
@media (max-width: 880px) { .subs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .subs { grid-template-columns: 1fr; } }
.sub { border-top: 1px solid var(--hairline); }
.sub-h {
  display: flex; align-items: baseline; gap: 9px; width: 100%;
  padding: 12px 0 14px; text-align: left; cursor: pointer; border-radius: 0;
}
.sub-h .sn { font-family: var(--mono); font-size: 10.5px; color: #B5AFA3; flex-shrink: 0; }
.sub-h .st { font-family: var(--display); font-weight: 600; font-size: 14.5px; letter-spacing: -0.01em; color: var(--ink); }
.sub-h .sp { margin-left: auto; color: #B5AFA3; font-size: 16px; line-height: 1; align-self: center; transition: transform 0.25s ease, color 0.15s ease; }
.sub-h:hover .sp { color: var(--ink); }
.sub.open .sp { transform: rotate(45deg); }
.sub-d {
  overflow: hidden; max-height: 0; opacity: 0;
  transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
  font-size: 13px; color: var(--slate); line-height: 1.5; padding: 0;
}
.sub.open .sub-d { max-height: 140px; opacity: 1; padding-bottom: 14px; }

/* ---------- loop cells: reuse .bento, add index tone ---------- */
.ix-sect .bento-cell .bc-k { color: #B5AFA3; }
.ix-sect .bento-cell .bc-k b { color: var(--slate); font-weight: 500; }

/* ---------- proof tweaks in v2 ---------- */
.ix-sect .num-grid { margin-top: 0; }

/* page-level: v2 sections don't want the generic .sect+.sect border stacking */
.v2-flow .sect + .ix-sect, .v2-flow .ix-sect + .sect { border-top: none; }