/* Page styles for microsoft.html and how-we-work.html. Loaded after motion.css. Tokens only. */

/* Case-study link cards (text only, no photo). a.w-card hover/lift comes from motion.css. */
.ms-cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 24px; }
a.ms-case, .ms-case { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 36px; }
.ms-case__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
.ms-case__more { margin-top: auto; }
a.ms-case:hover .ms-case__more .lm-icon { transform: translateX(4px); }

/* A light card inside a dark band keeps ink headings, and a focus ring that shows on the band */
.w-dark .w-light .t-h3 { color: var(--ink); }
.w-dark a.ms-case.w-light { --focus-ring: var(--focus-ring-band); }

/* Row of secondary links */
.ms-links { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 0; }

/* How we work: Microsoft note under the steps */
.ms-note { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 48px; margin-top: 48px; padding: 28px 32px; border: 1px solid var(--line-paper); border-radius: var(--radius-xl); background: var(--surface); }
.ms-note__text { display: flex; flex-direction: column; gap: 8px; flex: 1 1 420px; max-width: 760px; min-width: 0; }

/* How we work: sample avatar on the type ramp (was 8.4px) */
.ms-avatar { width: 24px; height: 24px; font-size: 12px; line-height: 16px; letter-spacing: 0; }

@media (max-width: 900px) {
  a.ms-case, .ms-case { padding: 24px; }
  .ms-note { padding: 24px; margin-top: 32px; }
}