/* ZTOOLS room --------------------------------------------------- */
.ztools-page { padding-bottom: var(--space-6); }
.ztools-intro { padding-bottom: var(--space-5); }

.ztools-shopline {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  padding: .8rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .14em;
}
.ztools-shopline span:first-child { color: var(--accent); }
.ztools-shopline span:last-child { text-align: right; }

.ztools-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.ztool { position: relative; min-height: 31rem; display: flex; flex-direction: column; overflow: hidden; background: rgba(13, 11, 17, .92); transition: background .4s var(--ease), transform .5s var(--ease); }
.ztool::before { content: ""; position: absolute; width: 11rem; aspect-ratio: 1; top: 5rem; right: -7rem; border: 1px solid rgba(255,107,39,.08); border-radius: 50%; box-shadow: 0 0 0 2.6rem rgba(255,107,39,.018); pointer-events: none; transition: transform .7s var(--ease); }
.ztool:hover { z-index: 1; background: var(--bg-sunken); transform: translateY(-4px); }
.ztool:hover::before { transform: translateX(-1rem) scale(1.08); }
.ztool__top { display: flex; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); color: var(--muted); font-family: var(--font-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; }
.ztool__top span:first-child { color: var(--accent); }
.ztool__top span:last-child { text-align: right; }
.ztool__body { flex: 1; padding: var(--space-4) var(--space-3); }
.ztool__kicker { margin: 0; color: var(--muted); font-family: var(--font-mono); font-size: .67rem; letter-spacing: .14em; }
.ztool h2 { margin: var(--space-2) 0 0; color: var(--fg); font-size: clamp(1.5rem, 3vw, 2.15rem); font-weight: 300; line-height: 1.2; }
.ztool__lede { margin: var(--space-3) 0 0; color: var(--fg-dim); font-weight: 300; }
.ztool__facts { margin: var(--space-4) 0 0; padding: var(--space-2) 0 0 1.1rem; border-top: 1px solid var(--line); color: var(--muted); font-family: var(--font-mono); font-size: .67rem; letter-spacing: .05em; line-height: 1.8; }
.ztool__facts li::marker { color: var(--accent); }
.ztool__foot { display: flex; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-top: 1px solid var(--line); color: var(--faint); font-family: var(--font-mono); font-size: .63rem; letter-spacing: .1em; }
.ztool__state { color: var(--accent); text-align: right; }
.ztool__action { display: flex; justify-content: space-between; gap: var(--space-2); padding: .85rem var(--space-3); border-top: 1px solid var(--line); color: var(--muted); font-family: var(--font-mono); font-size: .58rem; letter-spacing: .13em; }
.ztool__action span:last-child { color: var(--accent); }

.ztools-section { margin-top: var(--space-5); }
.ztools-note { max-width: 42em; margin: var(--space-3) 0; color: var(--fg-dim); font-weight: 300; }
.ztools-note--sub { margin-top: calc(var(--space-2) * -1); color: var(--muted); font-size: .82rem; }
.ztools-links { border-top: 1px solid var(--line); }
.ztools-links a { display: flex; justify-content: space-between; gap: var(--space-2); padding-block: var(--space-2); border-bottom: 1px solid var(--line); color: var(--fg-dim); transition: color .35s var(--ease), padding-left .35s var(--ease); }
.ztools-links a:hover,
.ztools-links a:focus-visible { padding-left: var(--space-1); color: var(--fg); outline: none; }
.ztools-links a span:last-child { color: var(--accent); font-family: var(--font-mono); }

@media (max-width: 52rem) {
  .ztools-grid { grid-template-columns: 1fr; }
  .ztool { min-height: auto; }
}

@media (max-width: 36rem) {
  .ztools-shopline { align-items: flex-start; flex-direction: column; }
  .ztools-shopline span:last-child { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .ztool,
  .ztools-links a { transition: none; }
  .ztool:hover { transform: none; }
}