/* Eight use cases surround one generated multi-tool; all labels remain native HTML. */
.tr .tp-use-map { padding-block: clamp(26px, 4vh, 52px); overflow: hidden; background: #f5f7fc; }
.tp-use-map .st { margin-bottom: 20px; }
.tr .tp-use-map .st h2 { font-size: clamp(29px, 2.65vw, 46px); letter-spacing: -.035em; }
.tp-use-map .st h2::after { width: 76px; height: 3px; margin-top: 14px; }
.tr .tp-use-map .st .tp-k { margin-bottom: 12px !important; color: #6176a7; }
.tr .tp-use-map .st p:not(.tp-k) { margin-top: 13px; font-size: clamp(15px, 1.12vw, 19px); line-height: 1.5; color: #62749b; max-width: 850px; }
.tp-use-stage { position: relative; height: clamp(355px, calc(100svh - 490px), 510px); }
.tp-tool { position: absolute; height: 100%; aspect-ratio: 1; left: 50%; top: 0; transform: translateX(-50%); margin: 0; }
.tp-tool img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; }
.tp-tool-orbit { position: absolute; inset: 5%; border: 1px dashed #d3dff3; border-radius: 50%; background: radial-gradient(circle, transparent 0 28%, #eaf0fa77 28% 41%, transparent 41% 54%, #eaf0fa55 54% 64%, transparent 64%); }
.tp-tool-logo { position: absolute; z-index: 2; width: 45%; left: 52%; top: 52.4%; transform: translate(-50%, -50%) rotate(-18deg); --logo-threat: #ff3e49; --logo-responder: #d7e4f5; filter: drop-shadow(0 1px 1px #081d4b); }
.tp-tool .tp-tool-logo img { display: block; width: 100%; height: auto; }
.tr main svg.tp-tool-lines { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; overflow: visible; stroke: none; color: #3971d6; pointer-events: none; }
.tp-tool-lines path { vector-effect: non-scaling-stroke; }
.tp-use-callouts { display: grid; position: relative; grid-template-columns: minmax(0, 1fr) minmax(340px, 1.48fr) minmax(0, 1fr); grid-template-rows: repeat(4, 1fr); height: 100%; gap: 8px 38px; padding: 0; margin: 0; list-style: none; pointer-events: none; }
.tp-use-item { display: flex; gap: 20px; align-items: center; min-width: 0; pointer-events: auto; }
.tp-use-item:nth-child(odd) { grid-column: 1; }
.tp-use-item:nth-child(even) { grid-column: 3; }
.tp-use-item.use-1, .tp-use-item.use-2 { grid-row: 1; }
.tp-use-item.use-3, .tp-use-item.use-4 { grid-row: 2; }
.tp-use-item.use-5, .tp-use-item.use-6 { grid-row: 3; }
.tp-use-item.use-7, .tp-use-item.use-8 { grid-row: 4; }
.tp-use-item > i { flex: none; width: 62px; height: 62px; border-radius: 50%; background: #ffeaed; color: var(--red); }
.tr main .tp-use-item > i svg { width: 29px; height: 29px; }
.tr .tp-use-item h3 { margin: 0; font-size: clamp(15px, 1.12vw, 20px); line-height: 1.25; letter-spacing: -.025em; color: var(--navy); font-weight: 700; }
.tr .tp-use-item p { margin: 7px 0 0 !important; color: #62749b; font-size: clamp(12px, .96vw, 16px); line-height: 1.45; }
.tp-use-action { position: relative; z-index: 2; text-align: center; margin-top: 4px; }
.tr .tp-use-action p { color: #647bac; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.tp-use-action p span { color: var(--red); padding-inline: 12px; }
.tp-use-action .btn { margin-top: 16px; height: 50px; padding-inline: 26px; border-radius: 9px; gap: 16px; font-size: 15px; box-shadow: none; }
@media (min-width: 1101px) and (max-width: 1500px) {
  .tp-use-callouts { grid-template-columns: minmax(0, 1fr) minmax(300px, 1.3fr) minmax(0, 1fr); column-gap: 26px; }
  .tp-use-item { gap: 13px; }
  .tp-use-item > i { width: 47px; height: 47px; }
  .tr main .tp-use-item > i svg { width: 25px; height: 25px; }
}
@media (min-width: 1101px) and (max-height: 820px) {
  .tr .tp-use-map { padding-block: 14px; }
  .tr .tp-use-map .st h2 { font-size: 32px; }
  .tp-use-map .st { margin-bottom: 10px; }
  .tp-use-map .st h2::after { margin-top: 10px; }
  .tr .tp-use-map .st p:not(.tp-k) { font-size: 14px; line-height: 1.4; }
  .tp-use-stage { height: 355px; }
  .tr .tp-use-item h3 { font-size: 14px; }
  .tr .tp-use-item p { font-size: 12px; margin-top: 5px !important; line-height: 1.4; }
  .tp-use-callouts { row-gap: 5px; }
  .tp-use-action .btn { height: 43px; margin-top: 10px; font-size: 14px; }
}
@media (max-width: 1100px) {
  .tp-use-stage { height: auto; display: flex; flex-direction: column; gap: 20px; }
  .tp-tool { position: relative; left: auto; transform: none; width: min(510px, 80%); height: auto; margin-inline: auto; }
  .tr main svg.tp-tool-lines { display: none; }
  .tp-use-callouts { height: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; gap: 25px; }
  .tp-use-item:nth-child(n) { grid-column: auto; grid-row: auto; align-items: flex-start; }
  .tr .tp-use-item h3 { font-size: 17px; }
  .tr .tp-use-item p { font-size: 14px; }
  .tp-use-item > i { width: 48px; height: 48px; }
  .tp-use-action { margin-top: 30px; }
}
@media (max-width: 600px) {
  .tp-use-break { display: none; }
  .tp-use-callouts { grid-template-columns: 1fr; gap: 23px; }
  .tp-use-item { gap: 16px; }
  .tp-tool { width: 100%; }
  .tp-use-action .btn { padding-inline: 18px; font-size: 13px; }
  .tr .tp-use-action p { font-size: 9px; letter-spacing: .14em; }
}