/* =================================================================
   Secondary pages: audience pages, solutions, partner guide, legal.
   Not in the hand-off (decision D1); built from its components.
   ================================================================= */

/* ---------- Page header (eyebrow / h1 / lead), light ---------- */
.page-head {
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  padding: 40px var(--pad-x) 0;
}
.page-head .h1 { color: var(--grey-500); font-size: 58px; font-weight: 550; letter-spacing: -.04em; max-width: 20ch; }
.page-head .btn { margin-top: 16px; }

/* ---------- Feature grid (audience pages) ---------- */
.features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.feature {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 24px;
  border: 1px solid var(--grey-200);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .6);
}
.feature__icon {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: var(--r-pill);
  background: var(--midnight-100);
}
.feature__icon img { width: 32px; height: 32px; }
.feature__text { display: flex; flex-direction: column; gap: 4px; }
.feature__text p {
  font-size: 16px; font-weight: 450; line-height: 1.4;
  letter-spacing: -.01em; color: var(--grey-400);
}
.page-note { margin-top: 24px; font-size: 14px; color: var(--grey-400); }
.page-cta { margin-top: 48px; }

/* ---------- Link cards (solutions overview) ---------- */
.linkcards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.linkcard {
  display: flex; flex-direction: column; gap: 12px;
  padding: 28px 24px;
  border: 1px solid var(--grey-200);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .6);
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease), box-shadow var(--mid) var(--ease);
}
.linkcard:hover { border-color: var(--midnight-300); background: rgba(255, 255, 255, .9); box-shadow: var(--shadow-2); }
.linkcard .h3 { flex: 1; }
.linkcard__more { font-size: 14px; font-weight: 600; color: var(--midnight-300); }

/* ---------- Reading column (legal, partner guide) ---------- */
.reading {
  max-width: 760px;
  margin-inline: auto;
  padding: 32px;
  border: 1px solid var(--grey-200);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .8);
}
.reading__meta { margin-top: 8px; font-size: 14px; color: var(--grey-400); }
.reading__note { margin-top: 4px; font-size: 13px; font-style: italic; color: var(--grey-400); }
.reading__sections { display: flex; flex-direction: column; gap: 28px; margin-top: 32px; }
.reading__sections p {
  margin-top: 8px;
  font-size: 16px; font-weight: 450; line-height: 1.5;
  letter-spacing: -.01em; color: var(--grey-400);
  white-space: pre-line;
}
.reading .h1 { color: var(--grey-500); font-size: 40px; font-weight: 550; letter-spacing: -.04em; }

/* ---------- Maintenance / preview page ---------- */
.maint { min-height: calc(100svh - var(--gutter)); display: flex; flex-direction: column; }
.maint__header { display: flex; justify-content: space-between; align-items: center; padding: var(--nav-pad) calc(var(--gutter) + 8px); height: var(--nav-band); }
.maint__main { flex: 1; display: grid; place-items: center; padding: 24px var(--gutter) 48px; }
.maint__card {
  width: 100%; max-width: 560px;
  display: flex; flex-direction: column; gap: 16px; align-items: flex-start;
  padding: 40px;
  border: 1px solid var(--grey-200);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .8);
}
.maint__card .h2 { font-size: 40px; }
.maint__card form { display: flex; flex-direction: column; gap: 16px; width: 100%; margin-top: 8px; }
.maint__staff { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--grey-200); width: 100%; font-size: 14px; }
.maint__staff a { color: var(--grey-400); }
.maint__staff a:hover { color: var(--midnight-300); }
.maint__footer { text-align: center; font-size: 13px; color: var(--grey-400); padding: 8px; }

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
  .page-head .h1 { font-size: 46px; }
  .linkcards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .page-head .h1 { font-size: 32px; letter-spacing: -.03em; }
  .features, .linkcards { grid-template-columns: 1fr; }
  .reading { padding: 20px; }
  .reading .h1 { font-size: 30px; }
  .maint__card { padding: 24px; }
  .maint__card .h2 { font-size: 30px; }
}