/* ============================================================================
   PXL TOOLS-I-USE  v012 - page stylesheet
   Tokens, buttons and base patterns come from pxl-core.css and pxl-store.css
   (loaded via absolute live URLs in <head>). This file adds only what is new.
   All values reference pxl-core.css tokens exclusively. No cyan accent.
   ========================================================================= */

/* ---- REVEAL OVERRIDE (GSAP ScrollTrigger starts at opacity 0) ---- */
.reveal{opacity:1!important;transform:none!important;visibility:visible!important;}

/* ---- HERO ---- */
.store-hero .eyebrow{color:var(--magenta);}

/* ---- PIPELINE SLOT ---- */
.pipeline-slot{
  width:100%;aspect-ratio:1200/340;
  background:var(--bg-2);border:1px solid var(--hair);
  border-radius:14px;overflow:hidden;position:relative;display:block;
  margin-top:24px;
}
.pipeline-slot img,.pipeline-slot object{
  width:100%;height:100%;object-fit:contain;display:block;
}

/* ---- TOOLS SECTION HEAD ---- */
.tools-section-head{margin-bottom:28px;}
.tools-section-head h2{font-size:clamp(1.3rem,2.5vw,1.8rem);margin:0 0 6px;}
.tools-section-head p{font-size:14px;color:var(--ink-dim);margin:0;}

/* ---- STAGE GRID (v005): strict unit grid ----
   One card unit. A stage with 2 tools stacks 2 units; a stage with 1 tool
   gets ONE double card (2 units + gap) when a neighbour in its row stacks 2;
   in a row where every stage has 1 tool, cards stay 1 unit (.rows-1). Every card starts on the same top
   line, every stage ends on the same bottom line. Stage text sits UNDER the
   cards in a fixed 2-line slot. Card slots are fixed: name 1 line,
   description 2 lines. */
.tools-stage-grid{
  --unit:232px; --cgap:12px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--hair);border:1px solid var(--hair);border-radius:14px;overflow:hidden;
}
.tools-stage{background:var(--bg-1);padding:20px 18px 22px;display:flex;flex-direction:column;gap:14px;}
.tools-stage-hd{display:flex;align-items:baseline;gap:8px;height:28px;padding-bottom:8px;border-bottom:1px solid var(--hair);box-sizing:border-box;white-space:nowrap;overflow:hidden;}
.tools-stage-num{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.18em;color:var(--ink-faint);}
.tools-stage-label{font-family:'Sora',sans-serif;font-size:14px;font-weight:700;color:var(--ink);line-height:1.2;}
.tools-stage-cards{display:grid;grid-template-rows:var(--unit) var(--unit);gap:var(--cgap);}
.tools-stage-cards.is-single .tool-card{grid-row:1 / span 2;}
.tools-stage-cards.rows-1{grid-template-rows:var(--unit);}
.tools-stage-p{font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.02em;line-height:20px;height:20px;white-space:nowrap;color:var(--ink-faint);margin:0;overflow:hidden;}

/* ---- TOOL CARD: identical slots in every card ---- */
.tool-card{
  display:flex;flex-direction:column;box-sizing:border-box;height:100%;min-width:0;
  padding:14px;background:var(--bg-2);border:1px solid var(--hair);border-radius:10px;
}
.tool-top{display:flex;align-items:center;justify-content:space-between;gap:8px;height:44px;margin-bottom:12px;}
.tool-logo{width:44px;height:44px;object-fit:contain;border-radius:7px;background:var(--bg-0);flex:none;display:block;}
.tool-name{font-family:'Sora',sans-serif;font-size:15px;font-weight:700;color:var(--ink);line-height:20px;height:20px;white-space:nowrap;overflow:hidden;}
.tool-desc{font-size:13px;line-height:19px;height:76px;color:var(--ink-dim);margin:4px 0 0;overflow:hidden;}
.tool-actions{display:flex;align-items:center;gap:10px;margin-top:auto;height:28px;}
.tool-btn{display:inline-flex;align-items:center;height:28px;font-family:'Sora',sans-serif;font-size:12px;font-weight:600;padding:0 12px;border-radius:6px;background:var(--magenta);color:#fff;text-decoration:none;white-space:nowrap;transition:opacity .2s;}
.tool-btn:hover{opacity:.82;}
.tool-link{font-size:12px;color:var(--ink-dim);text-decoration:none;white-space:nowrap;}
.tool-link:hover{color:var(--ink);}
.tool-badge{font-family:'Space Mono',monospace;font-size:9px;font-weight:700;letter-spacing:.06em;padding:3px 6px;border-radius:4px;white-space:nowrap;}
.badge-trial{background:var(--gold);color:#140c00;}
.badge-pxl{background:var(--magenta);color:#fff;}
.badge-free{background:rgba(255,255,255,.1);color:var(--ink-dim);border:1px solid var(--hair);}

/* Double card: same slots, bigger logo, room for the deal box */
.deal-box{margin-top:12px;padding:8px 10px;background:rgba(255,165,0,.08);border:1px solid rgba(255,165,0,.28);border-radius:7px;}
.deal-label{display:block;font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:3px;}
.deal-box p{font-size:12px;color:var(--ink-dim);margin:0;line-height:17px;}
.deal-box strong{color:var(--gold);}

/* ---- VIDEO STRIP ---- */
.tools-video{padding:64px 0;border-top:1px solid var(--hair);}
.tools-video .wrap{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center;}
.tools-video-eyebrow{
  font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-faint);
}
.tools-video h2{font-size:clamp(1.4rem,2.5vw,1.9rem);margin:0;max-width:28ch;text-wrap:balance;}
.tools-video p{color:var(--ink-dim);font-size:15px;margin:0;max-width:52ch;}
.tools-video-thumb{
  position:relative;width:100%;max-width:1040px;aspect-ratio:16/9;
  border-radius:16px;overflow:hidden;background:var(--bg-2);
  border:1px solid var(--hair);
}
.tools-video-thumb a{display:block;width:100%;height:100%;}
.tools-video-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.tools-video-play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.4);transition:background .25s;
}
.tools-video-thumb:hover .tools-video-play{background:rgba(0,0,0,.2);}
.tools-video-play svg{width:64px;height:64px;color:#fff;opacity:.92;filter:drop-shadow(0 4px 16px rgba(0,0,0,.7));}

/* ---- AFFILIATE NOTICE ---- */
.affiliate-notice{
  display:inline-block;margin-top:18px;
  font-size:13px;color:var(--ink-faint);line-height:1.6;max-width:72ch;
}

/* ---- RESPONSIVE ---- */
@media(max-width:1024px){
  .tools-stage-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:600px){
  .tools-stage-grid{grid-template-columns:1fr;}
  .tools-stage{padding:16px 14px 18px;}
}

/* ---- WIDER TOOLS AREA (v006): the page is only about the tools ---- */
.tools-wide .wrap{max-width:1400px;}

/* ---- PIPELINE (v006): inline SVG, every stage is a link to its tools ---- */
.pipeline-slot{aspect-ratio:auto;}
.pipeline-svg{display:block;width:100%;height:auto;}
.pipeline-svg .pipe-link{cursor:pointer;}
.pipeline-svg .pipe-link:focus-visible .plate{stroke:var(--magenta);stroke-width:2;}
.pipeline-svg .pipe-link:hover .plate{fill:#1c1c1c;stroke:rgba(215,0,90,.6);}
.tools-stage{scroll-margin-top:96px;}
.tools-stage:target{box-shadow:inset 0 2px 0 var(--magenta);}

/* ---- VIDEO (v007): plays in place ---- */
.tools-video-thumb .yt-frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}
.yt-facade{cursor:pointer;}
/* ---- v008: general toolbox layout ----------------------------------------
   Strict unit grid (memory: feedback-card-grids-strict-unit-alignment):
   every card is 1 unit (1 column x 1 row) or a WIDE double (2 columns, same
   height) when it carries a deal. Fixed slots in every card: logo row 44,
   name 1 line, description 4 lines, "Seen in" 1 line, button 28. */
.tools-wide .wrap{max-width:1400px;}

/* Category map */
.cat-map{display:grid;grid-template-columns:repeat(7,1fr);gap:12px;margin-top:24px;}
.cat-plate{display:flex;flex-direction:column;gap:10px;height:188px;box-sizing:border-box;padding:16px;
  background:var(--bg-2);border:1px solid var(--hair);border-radius:12px;text-decoration:none;color:var(--ink);
  transition:border-color .2s,background .2s;}
.cat-plate:hover,.cat-plate:focus-visible{border-color:rgba(215,0,90,.6);background:#1c1c1c;}
.cat-num{font-family:'Sora',sans-serif;font-size:28px;font-weight:800;line-height:1;letter-spacing:-1px;}
.cat-name{font-family:'Sora',sans-serif;font-size:14px;font-weight:700;line-height:18px;height:36px;overflow:hidden;}
.cat-logos{display:flex;align-items:center;gap:6px;height:28px;margin-top:auto;}
.cat-logos img{width:28px;height:28px;object-fit:contain;border-radius:6px;background:var(--bg-0);}
.cat-more{font-family:'Space Mono',monospace;font-size:11px;color:var(--ink-faint);}
.cat-count{font-family:'Space Mono',monospace;font-size:11px;color:var(--ink-faint);letter-spacing:.04em;}

/* Category sections */
.cat-sec{margin-top:56px;scroll-margin-top:96px;}
.cat-sec:first-child{margin-top:0;}
.cat-hd{display:flex;align-items:baseline;gap:14px;padding-bottom:12px;margin-bottom:18px;border-bottom:1px solid var(--hair);}
.cat-hd-num{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.18em;color:var(--ink-faint);}
.cat-hd h3{font-family:'Sora',sans-serif;font-size:22px;font-weight:700;margin:0;}
.cat-hd p{margin:0 0 0 auto;font-size:14px;color:var(--ink-faint);}
.cat-sec:target .cat-hd{border-bottom-color:var(--magenta);}

.tool-grid{--unit:286px;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:var(--unit);gap:16px;}

/* Card: identical slots */
.tool-card{display:flex;box-sizing:border-box;height:100%;min-width:0;padding:16px;
  background:var(--bg-2);border:1px solid var(--hair);border-radius:12px;}
.tool-card.is-wide{grid-column:span 2;gap:20px;}
.tool-main{display:flex;flex-direction:column;flex:1 1 0;min-width:0;}
.tool-side{display:flex;flex-direction:column;justify-content:space-between;flex:1 1 0;min-width:0;padding-top:56px;}
.tool-top{display:flex;align-items:center;justify-content:space-between;gap:8px;height:44px;margin-bottom:12px;}
.tool-logo{width:44px;height:44px;object-fit:contain;border-radius:8px;background:var(--bg-0);flex:none;display:block;}
.tool-name{font-family:'Sora',sans-serif;font-size:15px;font-weight:700;color:var(--ink);line-height:20px;height:20px;white-space:nowrap;overflow:hidden;}
.tool-desc{font-size:13px;line-height:19px;height:76px;color:var(--ink-dim);margin:4px 0 0;overflow:hidden;}
.tool-seen{display:flex;align-items:center;gap:6px;height:22px;margin-top:10px;white-space:nowrap;overflow:hidden;}
.seen-label{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);}
.seen-chip{font-family:'Space Mono',monospace;font-size:10.5px;line-height:20px;padding:0 7px;border-radius:4px;border:1px solid var(--hair);color:var(--ink-dim);text-decoration:none;}
a.seen-chip:hover{border-color:var(--magenta);color:var(--ink);}
.seen-chip.is-plain{border-style:dashed;}
.tool-actions{display:flex;align-items:center;gap:10px;margin-top:auto;height:28px;}
.tool-btn{display:inline-flex;align-items:center;height:28px;font-family:'Sora',sans-serif;font-size:12px;font-weight:600;padding:0 12px;border-radius:6px;background:var(--magenta);color:#fff;text-decoration:none;white-space:nowrap;transition:opacity .2s;}
.tool-btn:hover{opacity:.82;}
.tool-link{font-size:12px;color:var(--ink-dim);text-decoration:none;white-space:nowrap;line-height:28px;}
.tool-link:hover{color:var(--ink);}
.tool-badge{font-family:'Space Mono',monospace;font-size:9px;font-weight:700;letter-spacing:.06em;padding:3px 6px;border-radius:4px;white-space:nowrap;}
.badge-trial{background:var(--gold);color:#140c00;}
.badge-pxl{background:var(--magenta);color:#fff;}
.badge-free{background:rgba(255,255,255,.1);color:var(--ink-dim);border:1px solid var(--hair);}
.deal-box{padding:12px 14px;background:rgba(255,165,0,.08);border:1px solid rgba(255,165,0,.28);border-radius:8px;}
.deal-label{display:block;font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:6px;}
.deal-box p{font-size:13px;color:var(--ink-dim);margin:0;line-height:19px;}
.deal-box strong{color:var(--gold);}

/* Videos */
.tools-video .wrap{align-items:stretch;}
.tools-video h2{align-self:center;}
.tools-video-eyebrow{align-self:center;}
.vid-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:12px;text-align:left;}
.vid-card{scroll-margin-top:96px;}
.vid-card .tools-video-thumb{max-width:none;}
.vid-title{font-family:'Sora',sans-serif;font-size:18px;font-weight:700;margin:14px 0 4px;line-height:24px;height:24px;overflow:hidden;}
.vid-line{font-size:14px;color:var(--ink-dim);margin:0;line-height:20px;height:40px;overflow:hidden;}
.vid-card:target .tools-video-thumb{outline:2px solid var(--magenta);outline-offset:4px;}

/* fix: older v007 rule set .tool-card to column; wide cards are two columns side by side */
.tool-card{flex-direction:row;}
.cat-name{text-wrap:balance;hyphens:none;}

/* ---- v010: orchestration stack (00 PXLnexus, 01 PXLsuite, 02-08 areas) ---- */
.stack{display:flex;flex-direction:column;margin-top:24px;}
.layer{display:grid;grid-template-columns:120px 1fr;gap:20px;align-items:center;padding:22px 24px;border-radius:14px;border:1px solid var(--hair);background:var(--bg-2);}
.layer-num{font-family:'Sora',sans-serif;font-size:34px;font-weight:800;letter-spacing:-1px;line-height:1;}
.layer-tag{display:block;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.18em;color:var(--ink-faint);text-transform:uppercase;margin-top:8px;}
.layer-body{display:flex;align-items:center;gap:28px;min-width:0;}
.lockup{height:44px;width:auto;display:block;flex:none;}
.layer-copy{color:var(--ink-dim);font-size:14px;line-height:21px;max-width:62ch;margin:0;text-wrap:pretty;}
.layer-copy b{color:var(--ink);}
.nw{white-space:nowrap;}
.prods{display:flex;gap:14px;align-items:center;margin-left:auto;flex:none;}
.prods img{height:28px;width:auto;display:block;}
.layer-end{display:flex;align-items:center;gap:28px;margin-left:auto;}
.cc{display:flex;align-items:center;gap:10px;font-family:'Space Mono',monospace;font-size:11px;color:var(--ink-faint);letter-spacing:.1em;text-transform:uppercase;}
.cc img{height:56px;width:auto;display:block;}
.layer-link{display:block;margin-top:6px;font-size:13px;color:var(--ink-dim);text-decoration:none;white-space:nowrap;}
.layer-link:hover{color:var(--ink);}
.layer.nexus{border-color:rgba(215,0,90,.55);background:linear-gradient(180deg,rgba(215,0,90,.10),rgba(215,0,90,.02));}
.layer.nexus .layer-num{color:var(--magenta);}
.layer.suite .layer-num{color:var(--gold);}
.drop{height:34px;margin-left:calc(50% - 1px);border-left:2px solid var(--magenta);}
.bus-stem{height:16px;margin-left:calc(50% - 1px);border-left:2px solid var(--gold);}
/* connector on the SAME grid as the tiles, so every tick is centred on its tile */
.bus{display:grid;grid-template-columns:repeat(7,1fr);gap:12px;height:18px;}
.bus i{position:relative;display:block;}
.bus i::before{content:"";position:absolute;top:0;left:-6px;right:-6px;border-top:2px solid var(--gold);}
.bus i:first-child::before{left:50%;}
.bus i:last-child::before{right:50%;}
.bus i::after{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 1px);border-left:2px solid var(--gold);}
.stack .cat-map{margin-top:0;}

/* v010b: whole layers clickable (stretched link), product logos link to their section */
.layer{position:relative;transition:border-color .2s,background-color .2s;}
.layer .stretch::after{content:"";position:absolute;inset:0;border-radius:14px;z-index:1;}
.layer.nexus:hover{border-color:var(--magenta);}
.layer.suite:hover{border-color:var(--gold);}
.layer:hover .layer-link{color:var(--ink);}
.prod{position:relative;z-index:2;display:block;padding:6px;border-radius:8px;border:1px solid transparent;transition:border-color .2s,background .2s;}
.prod:hover,.prod:focus-visible{border-color:rgba(255,165,0,.6);background:rgba(255,165,0,.06);}
.prods{gap:6px;}

/* v013: affiliate tools carry the PXLmentor gold border (Cris 2026-10-23) */
.tool-card.is-aff{border:1px solid var(--gold);box-shadow:0 0 0 1px rgba(255,165,0,.25),0 0 24px rgba(255,165,0,.10);}
/* v013: every deal for a tool in one box, each row its own link */
.tool-side{padding-top:0;justify-content:center;}
.deal-box{display:flex;flex-direction:column;gap:6px;}
.deal-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:6px;
  background:rgba(0,0,0,.25);border:1px solid rgba(255,165,0,.18);text-decoration:none;transition:border-color .2s,background .2s;}
.deal-row:hover,.deal-row:focus-visible{border-color:var(--gold);background:rgba(255,165,0,.10);}
.deal-txt{display:flex;flex-direction:column;min-width:0;}
.deal-txt b{font-family:'Sora',sans-serif;font-size:13px;font-weight:700;color:var(--ink);line-height:18px;white-space:nowrap;}
.deal-txt span{font-size:12px;color:var(--ink-dim);line-height:17px;white-space:nowrap;}
.deal-txt strong{color:var(--gold);}
.deal-go{font-family:'Sora',sans-serif;font-size:12px;font-weight:600;color:var(--gold);white-space:nowrap;}