.tm .card { gap: var(--sp-8); padding: 18px; }
.tm .card .card-title { margin-bottom: var(--sp-4); text-wrap: balance; }
.tm p { color: var(--t2); font-size: var(--fs-13); line-height: 20px; text-wrap: pretty; }
.tm b { color: var(--t1); font-weight: 500; }
.tm a:not(.btn) { color: var(--t1); text-decoration: underline; text-decoration-color: var(--pill-line-up); text-underline-offset: 3px;
  transition-property: text-decoration-color; transition-duration: var(--d-fast); transition-timing-function: var(--ease-out); }
@media (hover: hover) { .tm a:not(.btn):hover { text-decoration-color: var(--green-soft); } }
.tm code { color: var(--t1); font: 500 12px/1 ui-monospace, "SF Mono", Menlo, monospace; }
.tm .fours span { text-wrap: pretty; }

.tm-tag { display: inline-flex; align-items: center; align-self: flex-start; height: 20px; padding: 0 var(--sp-6); border-radius: 2px;
  background: color-mix(in srgb, var(--green) 5%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 15%, transparent);
  color: color-mix(in srgb, var(--green) 68%, white); font: 500 11px/1 var(--font); white-space: nowrap; }   

.tm-pv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.tm-pv > div { display: flex; flex-direction: column; gap: var(--sp-6); padding: 18px; border-radius: var(--r-card); background: var(--glass); box-shadow: var(--edge);
  transition: background-color var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out); }
@media (hover: hover) { .tm-pv > div:hover { background-color: var(--glass-hover); box-shadow: var(--edge-hover); } }
.tm-pv h3 { color: var(--t1); font: 600 var(--fs-14)/20px var(--font-h); letter-spacing: -0.01em; }
.tm-pv p { color: var(--t3); }

.tm-led.card { display: block; gap: 0; padding: 0; }
.tm-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 5fr); gap: var(--sp-6) var(--sp-24);
  padding: var(--sp-16) 18px; border-top: 1px solid var(--line); }
.tm-row:first-child { border-top: 0; }
.tm-row.tm-th { padding-block: var(--sp-12); }
.tm-th span { color: var(--idle); font: 500 11px/16px var(--font); letter-spacing: 0.08em; text-transform: uppercase; }
.tm-w { display: flex; flex-direction: column; gap: var(--sp-6); min-width: 0; }
.tm-w h3 { color: var(--t1); font: 600 var(--fs-14)/20px var(--font-h); letter-spacing: -0.01em; text-wrap: balance; }
.tm-w p { color: var(--t3); font-size: var(--fs-12); line-height: 18px; }
.tm-k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   
.tm-soon > p { grid-column: 1 / -1; color: var(--t3); }
.tm-note { margin-top: var(--sp-4); }

@media (max-width: 1023px) {
  .tm-pv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tm .grid > .c4:nth-child(3):last-child { grid-column: span 12; }   
}
@media (max-width: 719px) {
  .tm-pv { grid-template-columns: minmax(0, 1fr); }
  .tm-th { display: none; }
  .tm-row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); padding: var(--sp-16); }
  .tm-row:nth-child(2) { border-top: 0; }
  .tm-k { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal;
    display: block; margin-bottom: 2px; color: var(--idle); font: 500 11px/16px var(--font); letter-spacing: 0.08em; text-transform: uppercase; }
}