/* HM3 How we think. From mockup/sections/home/04, node states from home.css. */
.gm-method { display: flex; flex-direction: column; gap: 96px; }
.gm-method__steps { position: relative; }
.gm-method__line { position: absolute; left: 150px; right: 150px; top: 60px; height: 2px; background: var(--gm-rule-dark); }
.gm-method__list { position: relative; display: grid; grid-template-columns: repeat(var(--gm-n, 4), minmax(0, 1fr)); gap: 40px; }
.gm-stepcol { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; }
.gm-node {
  width: 120px; height: 120px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.36);
  -webkit-backdrop-filter: blur(2px) saturate(160%); backdrop-filter: blur(2px) saturate(160%);
  transition: background-color .2s ease, transform .2s ease;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .gm-node { background: #2A2346; } }
.gm-node svg, .gm-node svg g { transition: stroke .2s ease; }
.gm-stepcol:hover .gm-node { transform: scale(1.06); }
.gm-stepcol:hover .gm-node-teal { background: var(--gm-teal); }
.gm-stepcol:hover .gm-node-blue { background: var(--gm-blue); }
.gm-stepcol:hover .gm-node-purple { background: var(--gm-orange); }
.gm-stepcol:hover .gm-node svg g { stroke: #FFFFFF; }
.gm-stepcol__h { margin: 0; font-family: var(--gm-font-head); font-weight: 500; font-size: 36px; line-height: 1.04; color: #FFFFFF; }
.gm-stepcol__p { margin: 0; font-size: 18px; line-height: 1.55; color: var(--gm-lilac); }
.gm-method__close { display: flex; justify-content: space-between; align-items: flex-end; gap: 64px; padding-top: 8px; }
.gm-method__ctext { display: flex; flex-direction: column; gap: 32px; max-width: 760px; }
.gm-method__p { font-size: 20px; line-height: 1.6; color: var(--gm-lilac); }
.gm-method__p p { margin: 0; }
.gm-method__p strong { color: #FFFFFF; font-weight: 600; }
.gm-method__badge { flex-shrink: 0; display: block; width: 288px; height: 288px; margin: -40px -20px -40px 0; }
@media (prefers-reduced-motion: reduce) {
  .gm-node { transition: none; }
  .gm-stepcol:hover .gm-node { transform: none; }
}
@media (max-width: 1100px) {
  .gm-method { gap: 56px; }
  .gm-method__line { display: none; }
  .gm-method__list { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .gm-stepcol__h { font-size: 32px; }
  .gm-method__close { flex-direction: column; align-items: flex-start; gap: 24px; }
  .gm-method__badge { width: 200px; height: 200px; margin: 0; }
}
@media (max-width: 640px) {
  .gm-method__p { font-size: 18px; }
}