/* Shared technique list used on the home page and in interviews. */
.home-techniques-list {
  border-top: 2px solid var(--text);
}

.home-technique {
  --technique-color: var(--text);
  --technique-soft: var(--surface);
  display: grid;
  grid-template-columns: 98px minmax(0, 1fr) 44px;
  gap: 22px;
  align-items: center;
  min-height: 130px;
  padding: 16px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
  transition: padding 160ms ease, background-color 160ms ease;
}

.home-technique:hover {
  padding-right: 18px;
  padding-left: 18px;
  background: var(--technique-soft);
}

.home-technique-icon {
  display: grid;
  width: 92px;
  height: 92px;
  overflow: hidden;
  place-items: center;
  border-radius: 20px;
  background: var(--technique-soft);
}

.home-technique-icon img {
  display: block;
  width: 88px;
  height: 88px;
  object-fit: contain;
  transition: transform 180ms ease;
}

.home-technique:hover .home-technique-icon img {
  transform: scale(1.045);
}

.home-technique-main {
  display: grid;
  gap: 8px;
}

.home-technique--energy {
  --technique-color: #ffd84d;
  --technique-soft: #fff6cf;
}

.home-technique--effectiveness {
  --technique-color: #5979ed;
  --technique-soft: #edf1ff;
}

.home-technique--finance {
  --technique-color: #279b61;
  --technique-soft: #e8f7ef;
}

.home-technique--business {
  --technique-color: #f08a3e;
  --technique-soft: #fff0e4;
}

.home-technique--relationships {
  --technique-color: #e95162;
  --technique-soft: #ffecee;
}

.home-technique-category {
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 680;
}

.home-technique-category::before {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--technique-color);
  content: "";
}

.home-technique-name {
  font-size: clamp(1.18rem, 2vw, 1.55rem);
  font-weight: 690;
  letter-spacing: -0.035em;
  line-height: 1.15;
}

.home-technique-arrow {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid #d6d6d1;
  border-radius: 50%;
  transition: background-color 160ms ease, transform 160ms ease;
}

.home-technique:hover .home-technique-arrow {
  background: var(--technique-color);
  transform: translate(2px, -2px);
}


@media (max-width: 980px) {
      .home-technique {
        grid-template-columns: 180px minmax(0, 1fr) 44px;
      }
}
@media (max-width: 680px) {
      .home-technique {
        grid-template-columns: 74px minmax(0, 1fr) 36px;
        gap: 12px;
        min-height: 104px;
        padding: 12px 4px;
      }

      .home-technique:hover {
        padding-right: 8px;
        padding-left: 8px;
      }

      .home-technique-icon {
        width: 70px;
        height: 70px;
        border-radius: 16px;
      }

      .home-technique-icon img {
        width: 67px;
        height: 67px;
      }

      .home-technique-main {
        grid-column: 2;
      }

      .home-technique-category {
        font-size: 0.78rem;
      }

      .home-technique-name {
        font-size: 1.2rem;
      }

      .home-technique-arrow {
        grid-column: 3;
        grid-row: 1;
        width: 36px;
        height: 36px;
      }

}
.home-technique { min-width: 0; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.home-technique-main { min-width: 0; }
.home-technique-name { overflow-wrap: anywhere; }
.home-technique-icon { font-size: 1.8rem; }
.home-technique:focus-visible { outline: 3px solid #5979ed; outline-offset: 4px; }

.sp-story-techniques .home-techniques-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.sp-single .sp-story-techniques .home-techniques-heading > h2 { margin: 0; }
.sp-story-techniques .home-techniques-heading > a { flex-shrink: 0; color: var(--text); font: 600 .88rem/1.5 system-ui, sans-serif; text-decoration: underline; text-underline-offset: 5px; }
.sp-story-techniques .home-technique { grid-template-columns: 66px minmax(0, 1fr) 36px; gap: 18px; min-height: 96px; padding: 14px 8px; }
.sp-story-techniques .home-technique:hover { padding-inline: 14px; }
.sp-story-techniques .home-technique-icon { width: 62px; height: 62px; border-radius: 16px; }
.sp-story-techniques .home-technique-icon img { width: 60px; height: 60px; margin: 0; }
.sp-story-techniques .home-technique-name { font-size: clamp(1.05rem, 1.6vw, 1.3rem); }
.sp-story-techniques .home-technique-category { font-size: .77rem; }
.sp-story-techniques .home-technique-arrow { width: 36px; height: 36px; }
@media (max-width: 680px) {
  .sp-story-techniques .home-techniques-heading { align-items: flex-start; flex-wrap: wrap; }
  .sp-story-techniques .home-technique { grid-template-columns: 52px minmax(0, 1fr) 30px; gap: 10px; padding: 12px 4px; min-height: 84px; }
  .sp-story-techniques .home-technique:hover { padding-inline: 4px; }
  .sp-story-techniques .home-technique-icon { width: 50px; height: 50px; border-radius: 12px; font-size: 1.5rem; }
  .sp-story-techniques .home-technique-icon img { width: 48px; height: 48px; }
  .sp-story-techniques .home-technique-name { font-size: 1.06rem; line-height: 1.25; }
  .sp-story-techniques .home-technique-category { font-size: .7rem; gap: 6px; }
  .sp-story-techniques .home-technique-arrow { width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-technique, .home-technique-icon img, .home-technique-arrow { transition: none; }
  .home-technique:hover .home-technique-icon img, .home-technique:hover .home-technique-arrow { transform: none; }
}

/* Category headings and narrow screens keep the shared list readable. */
.sp-category .section-heading { align-items: baseline; }
.sp-category .section-heading > h2 { margin: 0; }
@media (max-width: 680px) {
  .sp-category .home-technique { grid-template-columns: 54px minmax(0, 1fr) 32px; }
  .sp-category .home-technique-icon { width: 50px; height: 50px; border-radius: 12px; font-size: 1.5rem; }
  .sp-category .home-technique-icon img { width: 48px; height: 48px; }
  .sp-category .home-technique-arrow { width: 32px; height: 32px; }
  .sp-category .home-technique-name { font-size: 1.12rem; }
}

/* The catalogue uses the same rows as the homepage, at a compact size. */
.sp-catalog .home-technique { grid-template-columns: 70px minmax(0, 1fr) 36px; gap: 20px; min-height: 104px; padding: 16px 10px; }
.sp-catalog .home-technique-icon { width: 66px; height: 66px; border-radius: 16px; }
.sp-catalog .home-technique-icon img { width: 64px; height: 64px; }
.sp-catalog .home-technique-name { font-size: clamp(1.12rem, 1.7vw, 1.4rem); }
.sp-catalog .home-technique-arrow { width: 36px; height: 36px; }
.sp-catalog .home-technique:hover { padding-inline: 14px; }
@media(max-width:680px) {
  .sp-catalog .home-technique { grid-template-columns: 54px minmax(0, 1fr) 30px; gap: 10px; min-height: 92px; padding: 12px 4px; }
  .sp-catalog .home-technique-icon { width: 50px; height: 50px; border-radius: 12px; }
  .sp-catalog .home-technique-icon img { width: 48px; height: 48px; }
  .sp-catalog .home-technique-name { font-size: 1.06rem; line-height: 1.25; }
  .sp-catalog .home-technique-category { font-size: .72rem; gap: 6px; }
  .sp-catalog .home-technique-arrow { width: 30px; height: 30px; }
  .sp-catalog .home-technique:hover { padding-inline: 4px; }
}