/* ==========================================================================
   memori — Layout primitives
   Structural helpers: page wrap, section rhythm, section headers and the
   two-column grids. Skin lives in components.css.
   ========================================================================== */

.wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 var(--wrap-pad);
}

/* ---- Sections ----------------------------------------------------------- */

section {
  padding: var(--section-pad) 0;
  border-top: 1px solid var(--hair);
}

.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(28px, 5vw, 90px);
  margin-bottom: clamp(44px, 6vh, 72px);
}

/* variant: header without side copy (e.g. Principles) */
.sec-head--tight {
  margin-bottom: var(--sp-9);
}

.sec-eyebrow {
  font: 500 var(--fs-xs) var(--font-mono);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--soft);
  margin-bottom: var(--sp-7);
}

.sec-eyebrow b {
  color: var(--accent);
  font-weight: 600;
  margin-right: var(--sp-2);
}

.sec-head h2 {
  font: 460 var(--fs-display)/1.08 var(--font-serif);
  letter-spacing: -0.02em;
}

.sec-head h2 em {
  font-style: italic;
  font-weight: 420;
  color: var(--accent);
}

.sec-copy p {
  font-size: var(--fs-lead);
  line-height: 1.7;
  color: var(--soft);
  max-width: 56ch;
}

/* key points inside the section intro */
.sec-copy p b {
  font-weight: 600;
  color: var(--accent-hi);
}

/* ---- Two-column bands ----------------------------------------------------- */

/* search results + connection map (§ 02) */
.res-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(24px, 3.5vw, 48px);
  margin-top: var(--sp-8);
  align-items: start;
}

/* portability diptych: any-agent + backup/sync panels (§ 04) */
.diptych {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3.5vw, 48px);
  align-items: stretch;
}

/* access headline + signup (§ access) */
.cta-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(28px, 5vw, 90px);
  align-items: center;
}

@media (max-width: 1000px) {
  .sec-head,
  .res-grid,
  .cta-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .diptych {
    grid-template-columns: 1fr;
  }
}