/* PLExyz pages: plexyz/, plexyz/crowd/, plexyz/grid/ (23 Oct 2026).
   Builds on product.css (main.pg-prod, main.pg-plexyz). Only what those rules do not already cover. */

/* the questions a product answers, as a short dotted list inside a white card */
main.pg-plexyz .px-list{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
main.pg-plexyz .px-list li{position:relative;padding-left:20px;color:var(--ink)}
main.pg-plexyz .px-list li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:50%;background:var(--t,var(--ink))}
main.pg-plexyz .duo .wcard h2.h32{color:var(--t-ink,var(--ink))}

/* white cards side by side: two or three across, one on a phone */
main.pg-plexyz .px-g{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
main.pg-plexyz .px-g.three{grid-template-columns:repeat(3,minmax(0,1fr))}
main.pg-plexyz .px-g .wcard{padding:28px}
main.pg-plexyz .px-g .wcard h3{color:var(--t-ink,var(--ink))}
main.pg-plexyz .px-g .wcard p{margin-top:8px;color:var(--muted)}
main.pg-plexyz .px-g .wcard p a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
@media (max-width:900px){main.pg-plexyz .px-g.three{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){main.pg-plexyz .px-g{grid-template-columns:minmax(0,1fr)}main.pg-plexyz .px-g .wcard{padding:22px}}

/* several short blocks stacked in one white card (who a product is for) */
main.pg-plexyz .px-stack{display:flex;flex-direction:column;gap:20px}
main.pg-plexyz .px-stack h3{color:var(--t-ink,var(--ink))}
main.pg-plexyz .px-stack p{margin-top:6px}

/* PLExyz year by year: plain rows, the year in the product colour */
main.pg-plexyz .px-years{list-style:none;margin:0;padding:0;background:#fff;border-radius:20px;box-shadow:inset 0 0 0 1px var(--line)}
main.pg-plexyz .px-years li{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding:18px 28px;border-top:1px solid var(--line);font-size:16px;line-height:1.5;color:var(--muted)}
main.pg-plexyz .px-years li:first-child{border-top:0}
main.pg-plexyz .px-years b{font:600 16px/1.5 var(--mono);color:var(--t-ink,var(--ink))}
main.pg-plexyz .px-years li span b{font:600 16px/1.5 var(--sans);color:var(--ink)}
main.pg-plexyz .px-years a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
@media (max-width:760px){main.pg-plexyz .px-years li{grid-template-columns:minmax(0,1fr);gap:2px;padding:14px 20px}}

/* a real photo filling one side of a .duo */
main.pg-plexyz .duo>.px-photo{position:relative;min-height:320px;border-radius:20px;overflow:hidden;margin:0}
main.pg-plexyz .duo>.px-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:900px){main.pg-plexyz .duo>.px-photo{min-height:0;aspect-ratio:4/3}}

/* the AntaraX band on dark: the Kain A, then the words (same shape as Tinara's) */
main.pg-plexyz .px-ax .tray.ink{padding:40px 48px}
main.pg-plexyz .px-ax .axline{background:transparent;border:0;padding:0;gap:40px;color:#fff}
main.pg-plexyz .px-ax .ax-mark{flex:0 0 160px;max-width:160px;margin:0}
main.pg-plexyz .px-ax .axa-pc{filter:drop-shadow(0 10px 18px rgba(0,0,0,.35))}
main.pg-plexyz .px-ax .ax-mark:focus-visible{box-shadow:0 0 0 3px #0E1116,0 0 0 5px #FB9800}
main.pg-plexyz .px-ax .axl-copy{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
main.pg-plexyz .px-ax .axl-copy p{margin:0;max-width:62ch;color:rgba(255,255,255,.76);font:400 16px/1.55 var(--sans)}
main.pg-plexyz .px-ax .axl-copy p.lead{color:#fff;font:500 20px/1.4 var(--sans);letter-spacing:-.01em}
main.pg-plexyz .px-ax .axl-copy p a{color:#fff;text-decoration:underline;text-underline-offset:3px}
main.pg-plexyz .px-ax .axl-copy .btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
@media (max-width:900px){main.pg-plexyz .px-ax .axline{flex-direction:column;align-items:flex-start;gap:24px}main.pg-plexyz .px-ax .tray.ink{padding:24px}main.pg-plexyz .px-ax .ax-mark{flex:none;width:140px}}

/* hero buttons can wrap on a narrow phone */
main.pg-plexyz .phero .btns{flex-wrap:wrap}

/* the PLExyz unit: concept sketches shown whole, on the sketch paper's own grey */
main.pg-plexyz .duo>.px-sketch{background:#DADADC}
main.pg-plexyz .duo>.px-sketch img{object-fit:contain}
@media (max-width:900px){main.pg-plexyz .duo>.px-sketch{aspect-ratio:892/631}}
/* a small spec list: label, then value */
main.pg-plexyz .px-spec{margin:0;display:flex;flex-direction:column;border-top:1px solid var(--line)}
main.pg-plexyz .px-spec>div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.45}
main.pg-plexyz .px-spec dt{font-weight:600;color:var(--t-ink,var(--ink))}
main.pg-plexyz .px-spec dd{margin:0;color:var(--ink);font-variant-numeric:tabular-nums}