/* Product cards shared by home (tiles), /tools (strip) and /products (jump row + panels):
   each product's brand colours, its wordmark, and the icon + wordmark lockup.
   /products adds products.css for the full panels. The markup comes from
   pdf-sources/products/build.py; the brand values are from each product's live site (Oct 2026):
     StemConsole   #0a0a0a bg, #2dd4bf teal, #f5c451 gold, Montserrat 700
     Mix Chops     #0a0806 bg, #f4efe7 ink, #2dd4bf teal, #f0a24a amber, Saira Condensed 800
     PrintBus      #0a0a0c bg, #f2f0ea ink, #ffb329 amber, Saira Semi Condensed 700, IBM Plex Mono
     Compression   this site's own tokens, Archivo Expanded 800 */

.pb--sc{--p-bg:#0a0a0a;--p-bg2:radial-gradient(ellipse 70% 60% at 78% 18%,rgba(45,212,191,.13),transparent 70%);--p-ink:#fff;--p-dim:#a0a0a0;--p-acc:#2dd4bf;--p-acc2:#f5c451;--p-line:rgba(255,255,255,.09);--p-rad:18px;--p-head:'Montserrat','Archivo',sans-serif;--p-mono:'Space Mono',monospace;--p-btn:#2dd4bf;--p-btn-ink:#04130f;--p-btn-rad:10px}
.pb--mc{--p-bg:#0a0806;--p-bg2:radial-gradient(ellipse 60% 70% at 85% 30%,rgba(45,212,191,.09),transparent 70%),radial-gradient(ellipse 60% 60% at 10% 0%,rgba(240,162,74,.07),transparent 70%);--p-ink:#f4efe7;--p-dim:#a8a197;--p-acc:#2dd4bf;--p-acc2:#f0a24a;--p-line:rgba(244,239,231,.09);--p-rad:24px;--p-head:'Saira Condensed','Archivo',sans-serif;--p-mono:'Space Mono',monospace;--p-btn:linear-gradient(180deg,#5eead4,#2dd4bf);--p-btn-ink:#04130f;--p-btn-rad:12px}
.pb--pb{--p-bg:#0a0a0c;--p-bg2:radial-gradient(ellipse 70% 60% at 80% 0%,rgba(255,179,41,.12),transparent 70%);--p-ink:#f2f0ea;--p-dim:#bdbdc4;--p-acc:#ffb329;--p-acc2:#ffcf70;--p-line:rgba(255,255,255,.09);--p-rad:18px;--p-head:'Saira Semi Condensed','Archivo',sans-serif;--p-mono:'IBM Plex Mono','Space Mono',monospace;--p-btn:#ffb329;--p-btn-ink:#1a1204;--p-btn-rad:10px}
.pb--cc{--p-bg:var(--module);--p-bg2:linear-gradient(var(--line-soft) 1px,transparent 1px) 0 0/54px 54px,linear-gradient(90deg,var(--line-soft) 1px,transparent 1px) 0 0/54px 54px;--p-ink:var(--ink);--p-dim:var(--ink-dim);--p-acc:var(--signal);--p-acc2:var(--level);--p-line:var(--line);--p-rad:18px;--p-head:'Archivo Expanded','Archivo',sans-serif;--p-mono:'Space Mono',monospace;--p-btn:var(--signal);--p-btn-ink:#04130f;--p-btn-rad:0}

/* ---------- wordmarks ----------
   One rule set for every context, sized from --cap (the height of the capitals), which the
   context sets: .plk for lockups, .prod__name on /products. An image wordmark carries --wm-h
   (its height per capital-letter height, from products.json: StemConsole 1.43, Mix Chops 1.62
   because the slash overhangs, PrintBus 1), so every mark's letters come out the same size. */
.wm{display:inline-flex;align-items:center;gap:calc(var(--cap) * .4);line-height:1;white-space:nowrap;flex:none}
.wm img{display:block;width:auto;height:calc(var(--cap) * var(--wm-h, 1))}
.wm svg{display:block;width:auto;height:calc(var(--cap) / .7 * 1.15)}
.wm--cc{font-family:'Archivo Expanded','Archivo',sans-serif;font-weight:800;font-size:calc(var(--cap) / .7);text-transform:uppercase;letter-spacing:-.01em;color:var(--ink)}
.wm--cc b{color:var(--signal);font-weight:800}
/* stacked like the course box: "The Compression" over "Code." */
.wm--stack{flex-direction:column;align-items:flex-start;gap:.1em}

/* ---------- lockups: app icon + wordmark ----------
   Wherever products sit side by side every one reads at the same height: --ic sets the icon,
   --cap the wordmark. The course has no single-line wordmark that fits, so it stacks to the icon. */
.plk{--ic:32px;--cap:12px;display:inline-flex;align-items:center;gap:calc(var(--ic) * .34);height:var(--ic);white-space:nowrap}
.plk__ic{display:block;flex:none;width:var(--ic);height:var(--ic);border-radius:22%;box-shadow:0 0 0 1px rgba(255,255,255,.1)}
.plk .wm--cc{font-size:calc(var(--ic) / 2.25)}

/* ---------- home: product tiles ---------- */
.ptiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.ptile{position:relative;display:flex;flex-direction:column;background:var(--p-bg2),var(--p-bg);color:var(--p-ink);border:1px solid var(--p-line);border-radius:calc(var(--p-rad) * .7);overflow:hidden;transition:translate .25s,border-color .25s}
/* the lift uses `translate`, not `transform`: the home reveal animates transform over .8s and
   ends on .rv.rv-in{transform:none}, so the two never fight and the hover stays quick */
.ptile:hover{translate:0 -3px;border-color:var(--p-acc)}
.ptile__vis{display:block;aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--p-line)}
.ptile__vis img{width:100%;height:100%;object-fit:cover;display:block}
.ptile__body{display:flex;flex-direction:column;flex:1;padding:20px 20px 18px}
.ptile__logo{display:flex;align-items:center;height:32px}
.ptile__logo .plk{--ic:32px;--cap:12px}
.ptile__line{display:block;margin:14px 0 16px;color:var(--p-dim);font-size:14px;line-height:1.55;flex:1}
/* price on one line, link on the next, in every tile, whatever the price length or screen width */
.ptile__meta{display:flex;flex-direction:column;align-items:flex-start;gap:10px;font-family:var(--p-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase}
.ptile__price{color:var(--p-ink)}
.ptile__go{color:var(--p-acc)}
.ptiles__sub{color:var(--ink-dim);max-width:44ch;font-size:15px;line-height:1.6}
.ptiles__more{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:22px;font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim)}
.ptiles__more a{color:var(--signal)}
.rack.rack--products{padding-bottom:0}
@media(max-width:1240px){.ptiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.ptiles{grid-template-columns:1fr}}

/* ---------- /tools: slim "made by Dan" strip ----------
   No boxes: the logos sit straight on the page between two hairlines. The dimming sits on the
   lockup, not the link, so it never fights site.js's reveal (.rv sets opacity on the link). */
.pstrip{display:flex;align-items:center;flex-wrap:wrap;gap:14px 34px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0}
.pstrip .plk{--ic:26px;--cap:10px;opacity:.82;transition:opacity .2s}
.pstrip a.pstrip__p{display:inline-flex;align-items:center;padding:6px 0}
.pstrip a.pstrip__p:hover .plk{opacity:1}
.pstrip__lb{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim);margin-right:auto}
.pstrip__lb b{color:var(--signal);font-weight:400}
.pstrip__all{font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--signal)}
.rack__grid + .pstrip{margin-top:28px}
@media(max-width:700px){.pstrip__lb{width:100%;margin-right:0}.pstrip{gap:14px 26px}}

/* the free-tools racks run four small modules across */
@media(min-width:961px){.rack__grid.rack__grid--4{grid-template-columns:repeat(4,1fr)}}

@media(prefers-reduced-motion:no-preference){
  /* the home reveal's transition list, plus the tile's own hover transitions */
  .ptile.rv{transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1),translate .25s,border-color .25s}
}
@media(prefers-reduced-motion:reduce){.ptile,.pstrip .plk{transition:none}.ptile:hover{translate:none}}