/* ============================================================
   H.3b ONLY — the extras on trial
   1. hold-and-reveal: press a card, the art crossfades to a zoom
      into the real page. No flip: name, price and CTA never move.
   2. input → output on tool cards
   3. pairs-with nudge on guides that have a companion tool
   ============================================================ */

.holdhint{font-family:var(--sans);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--jade);margin-top:14px}

/* ---------- 1. hold and reveal ---------- */
.pcard .thumb{position:relative}
.pcard .thumb .detail{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  opacity:0;transform:scale(1.06);
  transition:opacity .42s ease, transform .7s cubic-bezier(.22,1,.28,1);
  pointer-events:none;z-index:2;
}
.pcard.peeking .thumb .detail{opacity:1;transform:none}
.pcard.peeking .thumb img:first-of-type{transform:scale(1.02)}

/* the ring that fills while you hold */
.holdring{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:4;
  width:34px;height:34px;pointer-events:none;opacity:0;transition:opacity .25s}
.pcard:hover .holdring{opacity:1}
.pcard.peeking .holdring{opacity:0}
.holdring circle{fill:none;stroke-width:2}
.holdring .bg{stroke:rgba(255,255,255,.55)}
.holdring .fg{stroke:var(--jade);stroke-linecap:round;
  stroke-dasharray:88;stroke-dashoffset:88;transform:rotate(-90deg);transform-origin:50% 50%}
.pcard.holding .holdring .fg{transition:stroke-dashoffset .42s linear;stroke-dashoffset:0}

.peeklabel{position:absolute;top:9px;right:9px;z-index:5;font-family:var(--sans);font-size:8px;
  letter-spacing:.13em;text-transform:uppercase;background:var(--jade);color:#fff;padding:4px 8px;
  opacity:0;transition:opacity .3s}
.pcard.peeking .peeklabel{opacity:1}

/* ---------- 2. input → output ---------- */
.io-line{display:flex;align-items:center;gap:9px;margin:0 0 13px;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:9px 0}
.io-line .in,.io-line .out{font-family:var(--sans);font-size:9px;letter-spacing:.05em;
  line-height:1.35;text-transform:uppercase}
.io-line .in{color:var(--muted);flex:1}
.io-line .out{color:var(--jade);font-weight:500;flex:1.15;text-align:right}
.io-line .ar{color:var(--jade);flex-shrink:0;font-size:12px;line-height:1}

/* ---------- 3. pairs-with ---------- */
.pairs{display:flex;align-items:baseline;gap:6px;margin:0 0 12px;
  font-family:var(--sans);font-size:8.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);line-height:1.4}
.pairs b{color:var(--coral);font-weight:500}
.pairs .swap{border:0;background:transparent;padding:0;cursor:pointer;color:var(--jade);
  font:inherit;text-transform:uppercase;letter-spacing:.09em;text-decoration:underline;
  text-underline-offset:2px}
.pairs .swap:hover{color:var(--ink)}

@media(max-width:560px){
  .io-line .in,.io-line .out{font-size:8px}
  .pairs{font-size:8px}
}