/* ==========================================================
   TygerLabs.ai · How we work
   ========================================================== */

.how-principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
.how-principle h2 { margin: 0 0 var(--s-2); font-size: var(--text-xl); }
.how-principle p { margin: 0; color: var(--ink-2); }

.how-steps-head { margin-bottom: var(--s-7); }

/* Each step: timing, name and a down arrow on the left; what happens and
   what you get on the right. No numerals, no connecting track. */
.how-steps { display: grid; gap: var(--s-7); margin: 0; padding: 0; list-style: none; }
.how-step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s-6); }
.how-step-when { margin: 0 0 var(--s-1); font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--tiger-2); }
.how-step-side h3 { margin: 0; font-size: clamp(1.75rem, 1rem + 2vw, 2.5rem); font-weight: var(--fw-ultra); letter-spacing: -0.03em; overflow-wrap: anywhere; }
.how-step-arrow { display: block; margin-top: var(--s-3); font-size: 1.75rem; color: var(--tiger); }
.how-step-body > p:first-child { margin: 0 0 var(--s-5); font-size: var(--text-lg); color: var(--ink); }
.how-step-get-head { margin: 0 0 var(--s-2); font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--muted); }
.how-step-get { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: 0; padding: 0; list-style: none; color: var(--ink-2); }
.how-step-get .ph { margin-right: var(--s-1); color: var(--tiger); }

/* Engineers and AI side by side; the engineers' column carries the tiger */
.how-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.how-split-col { padding: var(--s-6); border-radius: var(--r-lg); background: var(--surface-1); }
.how-split-eng { background: var(--tiger-soft); }
.how-split-col h3 { margin: 0 0 var(--s-4); font-size: var(--text-xl); }
.how-split-eng h3 { color: var(--tiger-2); }
.how-split-col ul { display: grid; gap: var(--s-3); margin: 0; padding-left: 1.1rem; color: var(--ink-2); }

.how-cta { margin-top: var(--section-y); }

@media (max-width: 767.98px) {
  .how-principles, .how-split { grid-template-columns: minmax(0, 1fr); }
  .how-step { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .how-step-side { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s-3); }
  .how-step-when { flex-basis: 100%; }
  .how-step-side h3 { font-size: var(--text-2xl); }
  .how-step-arrow { margin: 0; font-size: 1.4rem; }
}