/* QC → Repair → Remember — cross-tool workflow guide page */
.qcw-page {
  background: var(--bg, #060d18);
  color: var(--text, #e7eef6);
  font-family: var(--font-body, "Hanken Grotesk", system-ui, sans-serif);
  min-height: 100vh;
}

.qcw-wrap { max-width: 1080px; margin: 0 auto; padding: clamp(2.5rem, 6vw, 5rem) clamp(1rem, 4vw, 2rem) 5rem; position: relative; z-index: 1; }

/* Aurora orbs (page supplies size/position; colors from premium-core) */
.dvp-orb { position: fixed; border-radius: 50%; pointer-events: none; will-change: transform; z-index: 0; }
.qcw-page .dvp-orb-1 { width: 42vw; height: 42vw; top: -10vw; left: -8vw; }
.qcw-page .dvp-orb-2 { width: 36vw; height: 36vw; top: 30vh; right: -12vw; }
.qcw-page .dvp-orb-3 { width: 30vw; height: 30vw; bottom: -8vw; left: 20vw; }

/* Hero */
.qcw-hero { text-align: center; max-width: 760px; margin: 0 auto clamp(2.5rem, 6vw, 4rem); }
.qcw-kicker { font: 800 .72rem/1 var(--font-mono, monospace); letter-spacing: .2em; text-transform: uppercase; color: var(--accent, #ff7338); margin-bottom: 1rem; }
.qcw-title { font: 900 clamp(2.2rem, 7vw, 4rem)/1.05 var(--font-display, sans-serif); letter-spacing: -.01em; margin-bottom: 1.25rem; }
.qcw-title span { color: var(--accent, #ff7338); font-weight: 700; }
.qcw-lede { font-size: clamp(1rem, 2.2vw, 1.18rem); line-height: 1.6; color: var(--text-secondary, #b9c6d6); }
.qcw-lede strong { color: var(--text, #fff); font-weight: 700; }
.qcw-hero-cta { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 1.75rem; }

.qcw-btn { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; font: 800 .74rem/1 var(--font-mono, monospace); letter-spacing: .08em; text-transform: uppercase;
  color: var(--text, #fff); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: .8rem 1.35rem; transition: transform .2s cubic-bezier(.16,1,.3,1), border-color .2s, background .2s; }
.qcw-btn:hover { transform: translateY(-2px); border-color: var(--accent, #ff7338); }
.qcw-btn.primary { background: var(--accent, #ff7338); border-color: var(--accent, #ff7338); color: #12060a; }
.qcw-btn.primary:hover { box-shadow: 0 10px 30px rgba(255,115,56,.28); }
.qcw-btn.small { padding: .62rem 1.05rem; font-size: .68rem; }

/* The loop */
.qcw-loop { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: .75rem; margin: 0 auto clamp(3rem, 7vw, 4.5rem); position: relative; }
.qcw-node { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; text-decoration: none; padding: 1.5rem 1.4rem; border-radius: 18px;
  border: 1px solid rgba(255,255,255,.1); background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)); transition: transform .25s cubic-bezier(.16,1,.3,1), border-color .25s; }
.qcw-node:hover { transform: translateY(-4px); border-color: rgba(255,115,56,.5); }
.qcw-node .qcw-n { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; background: var(--accent, #ff7338); color: #12060a; font: 900 1rem/1 var(--font-mono, monospace); margin-bottom: .8rem; }
.qcw-verb { font: 800 .7rem/1 var(--font-mono, monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--accent, #ff7338); margin-bottom: .45rem; }
.qcw-node-name { font: 800 1.35rem/1.1 var(--font-display, sans-serif); color: #fff; margin-bottom: .55rem; }
.qcw-node-desc { font-size: .9rem; line-height: 1.5; color: var(--text-secondary, #aab7c7); }
.qcw-node.step2 .qcw-n { background: var(--accent2, #ff2d78); }
.qcw-node.step2 .qcw-verb { color: var(--accent2, #ff2d78); }
.qcw-link { align-self: center; font-size: 1.6rem; color: var(--accent, #ff7338); opacity: .65; }
.qcw-return { position: absolute; bottom: -1.9rem; left: 50%; transform: translateX(-50%); font: 700 .7rem/1 var(--font-mono, monospace); letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary, #8aa); white-space: nowrap; }

/* Per-tool detail */
.qcw-steps { display: grid; gap: 1rem; margin-bottom: clamp(3rem, 7vw, 4.5rem); }
.qcw-step { padding: 1.6rem clamp(1.2rem, 3vw, 2rem); border-radius: 16px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.02); }
.qcw-step-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: .75rem; margin-bottom: .9rem; }
.qcw-step-verb { font: 800 .66rem/1 var(--font-mono, monospace); letter-spacing: .14em; text-transform: uppercase; color: var(--accent, #ff7338); }
.qcw-step-head h2 { font: 800 clamp(1.3rem, 3.2vw, 1.7rem)/1.15 var(--font-display, sans-serif); color: #fff; }
.qcw-step p { font-size: .96rem; line-height: 1.65; color: var(--text-secondary, #b9c6d6); margin-bottom: .9rem; }
.qcw-handoff { background: rgba(255,115,56,.07); border-left: 3px solid var(--accent, #ff7338); border-radius: 8px; padding: .8rem 1rem; font-size: .9rem !important; color: var(--text, #e7eef6) !important; }
.qcw-handoff-tag { font: 800 .64rem/1 var(--font-mono, monospace); letter-spacing: .1em; text-transform: uppercase; color: var(--accent, #ff7338); margin-right: .5rem; }
.qcw-step .qcw-btn.small { margin-top: .3rem; }

/* Walkthrough */
.qcw-walk { text-align: center; padding: clamp(2rem, 5vw, 3rem) 0 0; }
.qcw-walk-title { font: 900 clamp(1.6rem, 4vw, 2.4rem)/1.1 var(--font-display, sans-serif); color: #fff; margin: .4rem 0 1.75rem; }
.qcw-walk-list { max-width: 720px; margin: 0 auto; text-align: left; list-style: none; counter-reset: qcw; display: grid; gap: .75rem; }
.qcw-walk-list li { counter-increment: qcw; position: relative; padding: 1rem 1.1rem 1rem 3.2rem; border-radius: 12px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.02); font-size: .95rem; line-height: 1.6; color: var(--text-secondary, #b9c6d6); }
.qcw-walk-list li::before { content: counter(qcw); position: absolute; left: 1rem; top: 1rem; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border-radius: 50%; background: var(--accent, #ff7338); color: #12060a; font: 900 .82rem/1 var(--font-mono, monospace); }
.qcw-walk-list strong { color: #fff; }
.qcw-walk-cta { margin-top: 2rem; }

@media (max-width: 720px) {
  .qcw-link { transform: rotate(90deg); }
  .qcw-return { position: static; transform: none; display: block; text-align: center; margin-top: 1rem; }
}