/* Gateway.tsx — the public Home of a module host. CANONICAL, distributed with Gateway.tsx.
   The header is the public site's header: its colours and sizes are appsite.ca's (always dark), not the module's. */
.shop{max-width:1180px;margin:0 auto;padding:0 20px 40px;}
/* the public header — appsite.ca's (Tailwind 4 palette, exactly: zinc-100/200/400/700/800/900, amber-300/400, --primary) */
.pub-head{--z100:oklch(96.7% .001 286.375);--z200:oklch(92% .004 286.32);--z400:oklch(70.5% .015 286.067);--z700:oklch(37% .013 285.805);--z800:oklch(27.4% .006 286.033);--z900:oklch(21% .006 285.885);--a300:oklch(87.9% .169 91.605);--a400:oklch(82.8% .189 84.429);--pri:hsl(192 85% 55%);
  position:sticky;top:0;z-index:50;width:100%;border-bottom:1px solid color-mix(in oklab,var(--z800) 70%,transparent);background:hsl(220 20% 4% / .8);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);font-family:var(--font-geist-sans),Inter,system-ui,sans-serif;}
.pub-nav{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 24px;}
@media (min-width:768px){ .pub-nav{padding:16px 24px;} }
.pub-logo{display:flex;align-items:center;border-radius:16px;transition:transform .15s;flex-shrink:0;} .pub-logo:hover{transform:scale(1.02);}
.pub-logo img{height:56px;width:56px;object-fit:contain;display:block;} @media (min-width:768px){ .pub-logo img{height:80px;width:80px;} }
.pub-logo-text{font-weight:800;font-size:18px;color:var(--z100);}
/* the link row from 1100 px (the staff Sign in needs the room appsite.ca spends on nothing); below that, ☰ */
.pub-links{display:none;align-items:center;gap:32px;} @media (min-width:1100px){ .pub-links{display:flex;} } @media (min-width:1280px){ .pub-links{gap:40px;} }
.pub-right{display:flex;align-items:center;gap:12px;} @media (min-width:768px){ .pub-right{gap:16px;} }
.pub-link{font-size:14px;font-weight:500;line-height:20px;color:var(--z400);text-decoration:none;transition:color .15s;white-space:nowrap;} .pub-link:hover{color:var(--z100);}
.pub-link.active{color:var(--z100);text-decoration:underline;text-underline-offset:4px;text-decoration-color:hsl(192 85% 55% / .6);}
.pub-link.amber{color:var(--a400);} .pub-link.amber:hover,.pub-link.amber.active{color:var(--a300);}
.pub-hide-md{display:none;} @media (min-width:1100px){ .pub-hide-md{display:inline-flex;} }
.pub-hide-lg{display:none;} @media (min-width:1280px){ .pub-hide-lg{display:inline-flex;} }
.pub-cta{display:none;font-size:14px;font-weight:600;line-height:20px;color:hsl(220 20% 4%);background:var(--pri);border-radius:8px;padding:10px 20px;text-decoration:none;white-space:nowrap;transition:background .15s;} .pub-cta:hover{background:oklch(86.5% .127 207.078);}
@media (min-width:768px){ .pub-cta{display:inline-flex;} }
.pub-signin{font-size:14px;font-weight:600;line-height:20px;color:var(--z100);border:1px solid var(--z700);border-radius:8px;padding:8px 14px;text-decoration:none;white-space:nowrap;transition:border-color .15s,color .15s;} .pub-signin:hover{border-color:var(--pri);color:var(--pri);}
@media (min-width:768px){ .pub-signin{padding:9px 16px;} }
.pub-burger{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;border:1px solid var(--z700);background:transparent;color:var(--z100);font-size:18px;cursor:pointer;} @media (min-width:1100px){ .pub-burger{display:none;} }
.pub-menu{border-top:1px solid color-mix(in oklab,var(--z800) 70%,transparent);background:hsl(220 20% 4% / .96);padding:6px 24px 14px;display:flex;flex-direction:column;} @media (min-width:1100px){ .pub-menu{display:none;} }
.pub-menu-link{padding:12px 0;font-size:15px;font-weight:500;color:var(--z200);text-decoration:none;border-bottom:1px solid color-mix(in oklab,var(--z800) 50%,transparent);} .pub-menu-link:hover,.pub-menu-link.active{color:var(--z100);} .pub-menu-link.amber{color:var(--a400);}
.pub-menu-sep{height:6px;}
.pub-band{border-top:1px solid color-mix(in oklab,var(--z800) 50%,transparent);background:color-mix(in oklab,var(--z900) 60%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.pub-band p{margin:0 auto;max-width:1280px;padding:6px 24px;text-align:center;font-size:12px;line-height:16px;font-weight:500;letter-spacing:.025em;color:var(--z400);} .pub-band span{color:var(--z200);} .pub-band em{font-style:normal;color:hsl(192 85% 55% / .8);}
@media (max-width:767px){ .shop{padding:0 14px 32px;} }
/* the hero and its two ways in — sized to fit the view: text beside the two ways in on a laptop, compact buttons on a phone */
.shop-hero{padding:26px 0 18px;display:grid;gap:18px;align-items:center;}
@media (min-width:1024px){ .shop-hero{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:32px;padding:30px 0 22px;} }
.shop-eyebrow{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin:0 0 8px;}
.shop-hero h1{font-size:clamp(24px,3.1vw,36px);line-height:1.12;letter-spacing:-.01em;margin:0 0 10px;color:var(--text-primary);}
.shop-lede{font-size:14.5px;line-height:1.55;color:var(--text-muted);margin:0;}

.shop-gateway{display:grid;grid-template-columns:1fr;gap:10px;}
@media (min-width:640px) and (max-width:1023px){ .shop-gateway{grid-template-columns:1fr 1fr;} }
.shop-gate{display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:3px;align-items:center;padding:14px 16px;border-radius:14px;border:1px solid var(--border);background:var(--bg-surface);color:var(--text-primary);text-decoration:none;transition:transform .16s,border-color .16s,box-shadow .16s;}
.shop-gate:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 50%,var(--border));box-shadow:0 10px 26px rgba(0,0,0,.25);}
.shop-gate-primary{border-color:color-mix(in srgb,var(--accent) 45%,var(--border));background:color-mix(in srgb,var(--accent) 8%,var(--bg-surface));}
.shop-gate-glyph{font-size:24px;grid-row:span 2;} .shop-gate-title{font-size:15.5px;font-weight:800;} .shop-gate-text{font-size:12.5px;line-height:1.45;color:var(--text-muted);grid-column:2;}
/* the AppSite Cyber Check card — the third in the stack, only on a validated site (components/CyberShield.tsx): the QR
   code for the public record on the left, the verdict and its reasoning beside it; full width where the stack is two-up */
.shop-gate-cyber{grid-column:1 / -1;align-items:start;}
.shop-gate-qr{grid-row:span 2;width:88px;height:88px;border-radius:8px;background:var(--bg-base);padding:4px;display:block;}
.shop-gate-reasons{display:grid;gap:2px;margin:6px 0;color:var(--text-subtle);}
@media (max-width:639px){
  .shop-hero{padding:18px 0 12px;gap:14px;} .shop-hero h1{font-size:23px;} .shop-lede{font-size:13.5px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;}
  .shop-gateway{grid-template-columns:1fr 1fr;gap:8px;} .shop-gate{grid-template-columns:1fr;justify-items:start;padding:12px;row-gap:4px;} .shop-gate-glyph{grid-row:auto;font-size:20px;} .shop-gate-title{font-size:13.5px;line-height:1.25;} .shop-gate-text{display:none;}
}
/* the Cyber Check card on a phone: QR beside the reasoning (the other gate cards hide their text there — this one's text IS the point) */
@media (max-width:639px){ .shop-gate.shop-gate-cyber{grid-template-columns:auto 1fr;align-items:start;column-gap:12px;} .shop-gate-cyber .shop-gate-qr{width:64px;height:64px;grid-row:span 2;} .shop-gate-cyber .shop-gate-text{display:block;font-size:12px;} }

.shop-actions{display:flex;gap:10px;flex-wrap:wrap;}
/* public sections */
.shop-section{margin:22px 0;} .shop-section-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:12px;} .shop-section-head h2{font-size:18px;margin:0;color:var(--text-primary);} .shop-section-head p{margin:0;font-size:12.5px;color:var(--text-muted);}
.shop-foot{margin-top:40px;padding-top:16px;border-top:1px solid var(--border);font-size:12px;color:var(--text-muted);} .shop-foot a{color:var(--accent);}
/* PublicWidgets — the Marketplace's public cards on any module's Home (self-contained: no module CSS needed) */
.pw-empty{font-size:13px;color:var(--text-muted);}

/* ── THE widget card (WidgetCard in Gateway.tsx) — one shape in every group and on every page. Each block keeps a fixed
   height, content or not, so cards of different kinds line up (the Marketplace, every module's Home). ── */
.pw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;align-items:stretch;}
.pw-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border);border-radius:14px;background:var(--bg-surface);color:var(--text-primary);text-decoration:none;transition:transform .16s,box-shadow .16s,border-color .16s;height:100%;}
.pw-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.28);border-color:color-mix(in srgb,var(--accent) 45%,var(--border));}
.pw-cover{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;background:#0b0e14 center/cover no-repeat;font-size:40px;flex:none;}
.pw-body{display:flex;flex-direction:column;padding:14px 15px 15px;flex:1;}
.pw-kind{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);line-height:14px;height:14px;margin-bottom:6px;}
.pw-title{font-size:14.5px;font-weight:700;line-height:19px;height:38px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:6px;}
.pw-desc{font-size:12.5px;color:var(--text-muted);line-height:18px;height:36px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:10px;}
.pw-detail{height:44px;overflow:hidden;margin-bottom:10px;}
.pw-seals{display:flex;gap:10px;} .pw-seals span{display:inline-flex;flex-direction:column;align-items:center;gap:1px;font-size:22px;line-height:1;} .pw-seals img{width:24px;height:30px;object-fit:contain;} .pw-seals small{font-size:10px;font-weight:700;color:var(--text-muted);}
.pw-includes{margin:0;padding:0;list-style:none;font-size:12px;color:var(--text-muted);line-height:15px;}
.pw-includes li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:12px;position:relative;} .pw-includes li::before{content:'·';position:absolute;left:3px;color:var(--accent);font-weight:900;}
.pw-includes li.pw-more{color:var(--accent);font-weight:700;} .pw-includes li.pw-more::before{content:'';}
.pw-chips{display:flex;gap:6px;height:22px;overflow:hidden;flex-wrap:nowrap;margin-bottom:6px;}
.pw-chip{font-size:11px;font-weight:600;padding:3px 8px;border-radius:6px;background:var(--bg-elevated);color:var(--text-muted);white-space:nowrap;line-height:16px;flex:none;} .pw-chip.price{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);}
.pw-note{font-size:11.5px;color:#f59e0b;font-weight:600;line-height:16px;height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:10px;}
.pw-open{font-size:12.5px;font-weight:700;color:var(--accent);margin-top:auto;}
.pw-actions{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;min-height:30px;} .pw-actions .pw-open{margin-top:0;text-decoration:none;} .pw-actions .pw-state{font-size:12px;font-weight:600;color:var(--text-muted);} .pw-actions .pw-state.warn{color:#f59e0b;}

/* ── A module's selling landing under the gateway (a module-owned HomePublic.tsx: who it's for, the AI crew, three steps,
   the offer, the closing call) — Podcast's and Studio's use these. Cards inside a landing reuse the widget chips and
   button, so those wrap here instead of keeping the widget card's fixed one-line rhythm. ── */
.pd-section{margin:30px 0;}
.pd-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));}
@media (min-width:1100px){ .pd-grid-3{grid-template-columns:repeat(3,minmax(0,1fr));} .pd-grid-4{grid-template-columns:repeat(4,minmax(0,1fr));} }
.pd-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border);border-radius:16px;background:var(--bg-surface);color:var(--text-primary);text-decoration:none;transition:transform .16s,box-shadow .16s,border-color .16s;}
a.pd-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.3);border-color:color-mix(in srgb,var(--accent) 45%,var(--border));}
.pd-cover{aspect-ratio:4/3;background:#0b0e14;overflow:hidden;} .pd-cover img{width:100%;height:100%;object-fit:cover;display:block;}
.pd-cover-wait{display:block;width:100%;height:100%;background:linear-gradient(135deg,#0f172a,#0b1224);}
.pd-body{display:flex;flex-direction:column;gap:8px;padding:16px 18px 18px;}
.pd-kicker{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);}
.pd-title{font-size:19px;line-height:1.2;font-weight:800;margin:0;letter-spacing:-.01em;}
.pd-text{font-size:14px;line-height:1.55;color:var(--text-muted);margin:0;}
.pd-agents{display:grid;gap:22px;align-items:center;border:1px solid var(--border);border-radius:18px;padding:18px;background:color-mix(in srgb,var(--accent) 5%,var(--bg-surface));}
@media (min-width:900px){ .pd-agents{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);padding:22px;} }
.pd-agents-pic{aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:#0b0e14;} .pd-agents-pic img{width:100%;height:100%;object-fit:cover;display:block;}
.pd-agents-copy h2{font-size:clamp(22px,2.6vw,30px);line-height:1.12;margin:6px 0 10px;letter-spacing:-.01em;}
.pd-agent-list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:9px;}
.pd-agent-list li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;font-size:13.5px;line-height:1.5;color:var(--text-muted);}
.pd-agent-list b{color:var(--text-primary);} .pd-dot{width:10px;height:10px;border-radius:50%;margin-top:6px;display:inline-block;box-shadow:0 0 12px currentColor;}
.pd-band{margin:30px 0;display:grid;gap:16px;align-items:center;border-radius:18px;padding:22px;background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 18%,var(--bg-surface)),color-mix(in srgb,#a78bfa 14%,var(--bg-surface)));border:1px solid color-mix(in srgb,var(--accent) 40%,var(--border));}
@media (min-width:900px){ .pd-band{grid-template-columns:minmax(0,1.4fr) auto;padding:26px 28px;} }
.pd-band h2{font-size:clamp(22px,2.8vw,32px);line-height:1.1;margin:6px 0 8px;letter-spacing:-.01em;} .pd-band p{margin:0;font-size:14px;line-height:1.55;color:var(--text-muted);max-width:60ch;}
.pd-band-actions{display:flex;gap:10px;flex-wrap:wrap;}
.pd-btn{display:inline-flex;align-items:center;justify-content:center;padding:11px 18px;border-radius:10px;font-size:14px;font-weight:800;text-decoration:none;color:var(--text-primary);border:1px solid var(--border);background:var(--bg-surface);transition:transform .16s,border-color .16s;white-space:nowrap;}
.pd-btn:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent) 60%,var(--border));}
.pd-btn-primary{background:var(--accent);color:#04121a;border-color:transparent;} .pd-btn-primary:hover{filter:brightness(1.06);}
.pd-btn-ghost{background:transparent;color:var(--text-muted);}
.pd-cta{margin:34px 0 10px;text-align:center;padding:30px 18px;border-radius:18px;border:1px solid var(--border);background:var(--bg-surface);}
.pd-cta h2{font-size:clamp(24px,3vw,34px);margin:0 0 8px;letter-spacing:-.01em;} .pd-cta p{margin:0 auto 16px;max-width:62ch;font-size:14.5px;line-height:1.55;color:var(--text-muted);} .pd-cta .pd-band-actions{justify-content:center;}
@media (max-width:639px){ .pd-title{font-size:17px;} .pd-band,.pd-agents{padding:16px;} .pd-btn{flex:1 1 auto;} }
.pd-body .pw-chips{height:auto;flex-wrap:wrap;overflow:visible;margin:4px 0 0;} .pd-body .pw-open{margin-top:8px;}

/* The public header sticks the whole way down. Module layouts set html and body to 100% of the window (h-full); a sticky
   element cannot outlast its container, so the header (and the Marketplace's chip bar below it) left with the first
   screen. On a page with the public header the page grows with its content instead. */
html:has(.pub-head), html:has(.pub-head) > body{height:auto;min-height:100%;}

/* ── ModuleDetails + ModuleCourses (Gateway.tsx) — what a module does and the courses that teach it, on every Home ── */
.md-section{margin:30px 0;}
.md-grid{display:grid;gap:22px;align-items:center;}
@media (min-width:900px){ .md-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);} }
.md-kicker{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);}
.md-title{font-size:clamp(22px,2.6vw,30px);line-height:1.15;margin:6px 0 10px;letter-spacing:-.01em;color:var(--text-primary);}
.md-detail{font-size:14.5px;line-height:1.65;color:var(--text-muted);margin:0 0 12px;}
.md-more{font-size:13px;font-weight:700;color:var(--accent);text-decoration:none;}
.md-pic{border-radius:16px;overflow:hidden;background:#0b0e14;aspect-ratio:16/10;border:1px solid var(--border);} .md-pic img{width:100%;height:100%;object-fit:cover;display:block;}
.md-features{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px 22px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));}
.md-features li{position:relative;padding:12px 14px 12px 38px;border:1px solid var(--border);border-radius:12px;background:var(--bg-surface);font-size:13.5px;line-height:1.5;color:var(--text-primary);}
.md-features li::before{content:'✓';position:absolute;left:14px;top:11px;color:var(--accent);font-weight:900;}
.mc-sets{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));}
.mc-set{border:1px solid var(--border);border-radius:14px;background:var(--bg-surface);padding:14px 16px;}
.mc-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px;} .mc-head a,.mc-head span{font-size:14.5px;font-weight:800;color:var(--text-primary);text-decoration:none;} .mc-head a:hover{color:var(--accent);} .mc-head small{font-size:11.5px;color:var(--text-muted);white-space:nowrap;}
.mc-list{margin:0;padding:0 0 0 18px;display:flex;flex-direction:column;gap:8px;} .mc-list li{font-size:13px;line-height:1.45;color:var(--text-muted);}
.mc-list b{color:var(--text-primary);font-weight:700;} .mc-list small{margin-left:8px;font-size:11px;color:var(--accent);font-weight:700;} .mc-list span{display:block;font-size:12.5px;}
.md-features-inline{margin:12px 0 10px;grid-template-columns:1fr;gap:8px;} @media (min-width:640px){ .md-features-inline{grid-template-columns:1fr 1fr;} }

/* the platform section (ModulePlatform) — everything appsite.ca/modules/<slug> shows, in the landing's theme */
.pd-platform{display:flex;flex-direction:column;gap:22px;}
.pd-platform-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:28px;align-items:center;}
.pd-platform-pic{aspect-ratio:16/10;border-radius:16px;overflow:hidden;border:1px solid var(--border);background:#0b0e14;}
.pd-platform-pic img{width:100%;height:100%;object-fit:cover;display:block;}
.pd-platform-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;}
.pd-platform-copy h2{font-size:clamp(22px,2.6vw,30px);font-weight:800;line-height:1.2;color:var(--text-primary);margin:0 0 10px;}
.pd-platform-adds{border:1px solid var(--border);border-radius:16px;background:var(--bg-surface);padding:20px 22px;}
.pd-platform-adds h3{font-size:20px;font-weight:800;color:var(--text-primary);margin:4px 0 14px;}
.pd-platform-features{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;list-style:none;margin:0;padding:0;}
.pd-platform-features li{display:flex;gap:10px;align-items:baseline;border:1px solid var(--border);border-radius:12px;background:var(--bg-base);padding:12px 14px;color:var(--text-primary);font-weight:600;font-size:14px;line-height:1.4;}
.pd-platform-n{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;color:var(--accent);flex-shrink:0;}
.pd-platform-connected{margin-top:14px;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border));background:color-mix(in srgb,var(--accent) 8%,transparent);border-radius:12px;padding:12px 14px;}
.pd-platform-connected b{color:var(--text-primary);} .pd-platform-connected p{margin:4px 0 0;font-size:13.5px;line-height:1.55;color:var(--text-muted);}
/* "Works well with" — a slider of MODULES, each with its own picture, opening its Home (Gateway.tsx WorksWellWith) */
.pd-rel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.pd-rel-count{margin-left:8px;color:var(--text-muted);font-weight:600;}
.pd-rel-nav{display:flex;gap:6px;flex-shrink:0;}
.pd-rel-nav button{width:32px;height:32px;border-radius:9px;border:1px solid var(--border);background:var(--bg-elevated);color:var(--text-primary);font-size:20px;line-height:1;cursor:pointer;}
.pd-rel-nav button:hover:not(:disabled){border-color:var(--accent);color:var(--accent);}
.pd-rel-nav button:disabled{opacity:.35;cursor:default;}
.pd-rel-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,270px);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;margin-top:10px;padding-bottom:8px;scrollbar-width:thin;}
.pd-rel-card{scroll-snap-align:start;display:flex;flex-direction:column;border:1px solid var(--border);border-radius:14px;background:var(--bg-surface);overflow:hidden;color:inherit;text-decoration:none;transition:border-color .15s,transform .15s;}
.pd-rel-card:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--border));transform:translateY(-2px);}
.pd-rel-pic{display:block;aspect-ratio:16/10;background:var(--bg-elevated) center/cover no-repeat;border-bottom:1px solid var(--border);}
.pd-rel-body{display:flex;flex-direction:column;gap:4px;padding:12px 14px 14px;}
.pd-rel-body b{color:var(--text-primary);font-size:15px;}
.pd-platform-rel-cat{font-size:11.5px;color:var(--text-muted);} .pd-platform-rel-sum{font-size:13px;color:var(--text-muted);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
@media (max-width:639px){ .pd-rel-track{grid-auto-columns:78%;} }
@media (max-width:820px){ .pd-platform-top{grid-template-columns:1fr;} }