body.territory-field-product .tf-session-story {
  container: tf-session / inline-size;
  position: relative;
}

body.territory-field-product .tf-session-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
  gap: clamp(.75rem, 2cqi, 1.15rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

body.territory-field-product .tf-session-step {
  position: relative;
  min-width: 0;
  padding: clamp(1rem, 3cqi, 1.35rem);
  border: 1px solid color-mix(in srgb, var(--line, #fff) 68%, transparent);
  border-radius: clamp(1.15rem, 3cqi, 1.6rem);
  background:
    linear-gradient(145deg, color-mix(in srgb, #84e8ff 12%, transparent), transparent 42%),
    color-mix(in srgb, #07131d 72%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 18px 50px rgba(0,0,0,.22);
  backdrop-filter: blur(20px) saturate(145%);
  -webkit-backdrop-filter: blur(20px) saturate(145%);
  overflow: hidden;
  isolation: isolate;
}

body.territory-field-product .tf-session-step::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 15%, rgba(255,255,255,.13) 45%, transparent 66%);
  transform: translateX(-115%);
  transition: transform .55s cubic-bezier(.2,.8,.2,1);
}

body.territory-field-product .tf-session-step:hover::after,
body.territory-field-product .tf-session-step:focus-within::after {
  transform: translateX(115%);
}

body.territory-field-product .tf-session-index {
  display: inline-grid;
  place-items: center;
  inline-size: 2.4rem;
  block-size: 2.4rem;
  margin-block-end: .9rem;
  border-radius: 999px;
  background: rgba(93, 218, 255, .12);
  border: 1px solid rgba(145, 230, 255, .3);
  font: 700 .78rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
}

body.territory-field-product .tf-session-step h3 {
  margin: 0 0 .45rem;
  font-size: clamp(1.05rem, 3cqi, 1.35rem);
}

body.territory-field-product .tf-session-step p {
  margin: 0;
  max-inline-size: 38ch;
  overflow-wrap: anywhere;
}

body.territory-field-product .tf-session-step[data-state="active"] {
  background:
    radial-gradient(circle at 85% 10%, rgba(99, 224, 255, .18), transparent 34%),
    color-mix(in srgb, #07131d 78%, transparent);
}

@container tf-session (max-width: 42rem) {
  body.territory-field-product .tf-session-strip {
    grid-template-columns: 1fr 1fr;
  }
}

@container tf-session (max-width: 27rem) {
  body.territory-field-product .tf-session-strip {
    grid-template-columns: 1fr;
  }

  body.territory-field-product .tf-session-step {
    padding: 1rem;
  }
}

@media (pointer: coarse) {
  body.territory-field-product .tf-session-step {
    min-block-size: 7.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.territory-field-product .tf-session-step::after {
    display: none;
  }
}

@media (prefers-reduced-transparency: reduce), (prefers-reduced-data: reduce) {
  body.territory-field-product .tf-session-step {
    background: #0b1720;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  body.territory-field-product .tf-session-step {
    border-width: 2px;
    background: #07131d;
  }
}

@media (forced-colors: active) {
  body.territory-field-product .tf-session-step,
  body.territory-field-product .tf-session-index {
    forced-color-adjust: auto;
    background: Canvas;
    color: CanvasText;
    border: 1px solid CanvasText;
    box-shadow: none;
  }
}