/*
  UNBOND · Methodik section refinement · 05.10.2026
  Static HTML/CSS adaptation of the supplied component brief.
  No new font, dependency, route, checkout or tracking change.
*/

.method-section {
  background: #10151d !important;
}

.method-section .container {
  width: min(calc(100% - 40px), var(--block));
}

.methodik-heading {
  max-width: 760px;
  margin: 0 0 32px !important;
  text-align: left !important;
}

.methodik-heading .product-label {
  margin-bottom: 8px !important;
}

.methodik-heading h2 {
  max-width: 680px;
  margin: 0 !important;
}

/* Three decorative thought bands. Their static list is available to screen readers below. */
.methodik-thought-bands {
  display: grid;
  gap: 8px;
  margin: 0 0 32px;
}

.methodik-band {
  overflow: hidden;
  min-height: 42px;
  border-block: 1px solid rgba(233, 233, 228, .14);
  outline: none;
}

.methodik-band:focus-visible {
  outline: 3px solid var(--unbond-teal) !important;
  outline-offset: 3px;
}

.methodik-band-track {
  display: flex;
  width: max-content;
  animation: unbond-methodik-marquee 48s linear infinite;
  will-change: transform;
}

.methodik-band--two .methodik-band-track {
  animation-duration: 54s;
  animation-direction: reverse;
}

.methodik-band--three .methodik-band-track {
  animation-duration: 45s;
}

.methodik-band:hover .methodik-band-track,
.methodik-band:focus .methodik-band-track,
.methodik-band:focus-within .methodik-band-track {
  animation-play-state: paused;
}

.methodik-band-set {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  padding: 5px 8px 5px 0;
}

.methodik-question {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid rgba(21, 154, 130, .48);
  border-radius: 4px;
  background: #1b2026;
  color: var(--unbond-teal);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .025em;
  line-height: 1.25;
  white-space: nowrap;
}

.methodik-sr-list {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes unbond-methodik-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Six method cards keep the original methods and form three even desktop rows. */
.methodik-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px !important;
  max-width: none !important;
  margin: 0 !important;
}

.methodik-card {
  display: grid;
  grid-template-columns: auto 40px minmax(0, 1fr);
  grid-template-areas:
    "number icon label"
    "number icon title"
    "number icon copy";
  column-gap: 16px;
  row-gap: 6px;
  min-height: 200px;
  padding: 24px !important;
  border: 1px solid rgba(233, 233, 228, .18) !important;
  border-radius: 6px !important;
  background: #121923 !important;
  box-shadow: none !important;
  transition: border-color .16s ease;
}

.methodik-card:hover,
.methodik-card:focus-within {
  border-color: var(--unbond-teal) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Override the earlier generic method-card elevation at the same cascade scope. */
html body .methodik-card,
html body .methodik-card:hover,
html body .methodik-card:focus-within {
  box-shadow: none !important;
}

html body .method-grid .methodik-card,
html body .method-grid .methodik-card:hover,
html body .method-grid .methodik-card:focus-within {
  box-shadow: none !important;
}

.methodik-card .method-index {
  grid-area: number;
  align-self: start;
  width: 28px;
  height: 28px;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--unbond-number-gold) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .08em;
}

.methodik-icon {
  display: grid;
  grid-area: icon;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(21, 154, 130, .52);
  border-radius: 4px;
  color: var(--unbond-teal);
}

.methodik-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.methodik-card:hover .methodik-icon,
.methodik-card:focus-within .methodik-icon {
  border-color: var(--unbond-teal);
  background: rgba(21, 154, 130, .11);
}

.methodik-system-label {
  grid-area: label;
  margin: 0;
  color: rgba(233, 233, 228, .64);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  line-height: 1.2;
  text-transform: uppercase;
}

.methodik-card h3 {
  grid-area: title;
  margin: 0 !important;
  color: var(--unbond-teal);
  font-family: Poppins, system-ui, sans-serif !important;
  font-size: clamp(1.05rem, 1.5vw, 1.24rem) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

.methodik-card > p:last-child {
  grid-area: copy;
  max-width: 53ch;
  margin: 0 !important;
  color: #c8ccd2 !important;
  font-size: .94rem !important;
  line-height: 1.58 !important;
}

/* The clear boundary is intentionally a fully visible technical note, not a disclosure. */
.methodik-boundary {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid rgba(21, 154, 130, .64);
  border-left-width: 3px;
  border-radius: 6px;
  background: rgba(21, 154, 130, .08);
  color: #e9e9e4;
}

.methodik-boundary-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(21, 154, 130, .64);
  border-radius: 4px;
  color: var(--unbond-teal);
}

.methodik-boundary-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.methodik-boundary-label {
  margin: 0 0 6px;
  color: var(--unbond-teal);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.2;
  text-transform: uppercase;
}

.methodik-boundary p:not(.methodik-boundary-label) {
  max-width: 76ch;
  margin: 0;
  color: #e9e9e4;
  font-size: .94rem;
  line-height: 1.55;
}

.methodik-boundary-detail {
  display: block;
  margin-top: 4px;
  color: #c8ccd2;
}

@media (max-width: 760px) {
  .method-section .container {
    width: min(calc(100% - 32px), var(--block));
  }

  .methodik-heading {
    margin-bottom: 24px !important;
  }

  .methodik-grid {
    gap: 8px !important;
  }

  .methodik-card {
    min-height: 176px;
    padding: 20px !important;
  }

}

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

  .methodik-card {
    grid-column: auto;
  }

  .methodik-card {
    grid-template-columns: auto 36px minmax(0, 1fr);
    column-gap: 12px;
    padding: 16px !important;
  }

  .methodik-boundary {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
  }

  .methodik-boundary-icon {
    width: 32px;
    height: 32px;
  }
}

@media (max-width: 560px), (prefers-reduced-motion: reduce) {
  .methodik-band {
    overflow: visible;
  }

  .methodik-band-track {
    width: auto;
    flex-wrap: wrap;
    animation: none !important;
    transform: none !important;
  }

  .methodik-band-set {
    flex-wrap: wrap;
    width: 100%;
  }

  .methodik-band-set--clone {
    display: none;
  }

  .methodik-question {
    white-space: normal;
  }
}