/* 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-head{letter-spacing:normal;}   /* the header keeps appsite.ca's type whatever the app's body sets (Scheduling's body is -0.006em: it moved every link up to 4px) */
.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);}
/* appsite.ca's header, exactly (Paul, 2026-10-05: "headers should be same … connected and updating together"): the three groups are spaced by justify-between alone,
   the link row gaps are appsite.ca's own (16 → 28 from 1280 — the 40 at 1536 overfilled the 1280px row once the account button joined it, and the logo touched Platform) and the row shows from 1180 px (at 1100 it touched and scrolled sideways); below that, ☰; the nav keeps 16px between its parts whatever the width */
.pub-links{display:none;align-items:center;gap:16px;} @media (min-width:1180px){ .pub-links{display:flex;} } @media (min-width:1280px){ .pub-links{gap:28px;} }
.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:1180px){ .pub-hide-md{display:inline-flex;} }
.pub-hide-lg{display:none;} @media (min-width:1180px){ .pub-hide-lg{display:inline-flex;} }
.pub-cta{display:none;font-size:14px;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;font-weight:400;}   /* 400 — what appsite.ca's own button renders (its font-semibold loses to a reset there); 600 is 6px wider */ .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-fs{display:inline-flex;align-items:center;justify-content:center;padding:8px;border:1px solid var(--z700);border-radius:8px;background:transparent;color:var(--z400);cursor:pointer;transition:background .15s,color .15s;} .pub-fs:hover{background:var(--z800);color:var(--z100);}
.pub-acct{position:relative;display:inline-flex;}
.pub-acct-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;box-sizing:border-box;padding:0;border:1px solid var(--z700);border-radius:8px;background:transparent;color:var(--z400);cursor:pointer;text-decoration:none;overflow:hidden;transition:background .15s,color .15s,border-color .15s;} .pub-acct-btn:hover{background:var(--z800);color:var(--z100);}
.pub-acct-wait{visibility:hidden;}
.pub-acct-in{border-radius:999px;border-color:var(--pri);color:var(--z100);background:var(--z800);font-size:14px;font-weight:600;line-height:1;}
.pub-acct-in img{width:100%;height:100%;object-fit:cover;display:block;}
.pub-acct-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:240px;display:flex;flex-direction:column;padding:6px;border:1px solid var(--z800);border-radius:10px;background:hsl(220 20% 6%);box-shadow:0 12px 32px rgb(0 0 0 / .45);}
.pub-acct-who{display:flex;flex-direction:column;gap:2px;padding:10px 12px 12px;margin-bottom:4px;border-bottom:1px solid var(--z800);}
.pub-acct-who b{font-size:14px;font-weight:600;color:var(--z100);overflow-wrap:anywhere;} .pub-acct-who small{font-size:12px;color:var(--z400);overflow-wrap:anywhere;}
.pub-acct-menu a,.pub-acct-menu button{display:block;width:100%;box-sizing:border-box;padding:9px 12px;border:0;border-radius:6px;background:transparent;font:inherit;font-size:14px;line-height:20px;text-align:left;color:var(--z200);text-decoration:none;cursor:pointer;} .pub-acct-menu a:hover,.pub-acct-menu button:hover{background:var(--z800);color:var(--z100);}
.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:1180px){ .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:1180px){ .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;align-items:start;} .shop-hero-text{padding-top: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;}

/* the hero's right-hand stack — ONE family of cards (Paul, 2026-10-01: "beautify the other two badges above cybercheck
   they should all be same style"). Every card: a SEAL on the left (a tile for the ways in, drawn in gate-marks below; the
   Verified SHIELD Cybersecurity serves for the Cyber Check), a kicker, the title, its words, and on the right what you do
   next (an arrow; the Cyber Check's QR code). A card's colour is its tone, --gate-a → --gate-b: violet to look around,
   cyan for staff, cyan → emerald for the Cyber Check, amber for Beta. The third card (Cyber Check or Beta) is full width
   where the stack is two-up. */
.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{--gate-a:var(--accent);--gate-b:var(--accent);display:grid;grid-template-columns:92px minmax(0,1fr) minmax(104px,auto);align-content:center;align-items:center;column-gap:16px;row-gap:2px;padding:14px 18px 14px 16px;border-radius:14px;border:1px solid color-mix(in srgb,var(--gate-b) 32%,var(--border));background:linear-gradient(120deg,color-mix(in srgb,var(--gate-a) 10%,var(--bg-surface)),color-mix(in srgb,var(--gate-b) 6%,var(--bg-surface)) 55%,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(--gate-b) 60%,var(--border));box-shadow:0 10px 30px color-mix(in srgb,var(--gate-b) 14%,transparent),0 10px 26px rgba(0,0,0,.25);}
.shop-gate-public{--gate-a:#c084fc;--gate-b:#a78bfa;}
.shop-gate-primary{--gate-a:#22d3ee;--gate-b:#3b82f6;}
.shop-gate-cyber{--gate-a:#22d3ee;--gate-b:#34d399;}
.shop-gate-cyber{cursor:pointer;}
.shop-gate-dev{display:block;margin-top:8px;font-size:13px;line-height:1.5;color:var(--text-muted);overflow-wrap:anywhere;}
.shop-gate-dev b{color:var(--text-primary);font-weight:600;}
.shop-gate-dev a{color:var(--gate-a);text-decoration:none;} .shop-gate-dev a:hover{text-decoration:underline;}
a.shop-gate-cta{text-decoration:none;}
.shop-gate-beta{--gate-a:#fbbf24;--gate-b:#f97316;}
.shop-gate-cyber,.shop-gate-beta{grid-column:1 / -1;}
.shop-gate-mark,.shop-gate-emblem{grid-column:1;grid-row:span 3;justify-self:center;display:block;transition:transform .2s;filter:drop-shadow(0 6px 16px color-mix(in srgb,var(--gate-b) 28%,transparent));}
.shop-gate-mark{width:80px;height:80px;background:center / contain no-repeat;}
.shop-gate-emblem{width:92px;height:107px;}
.shop-gate:hover .shop-gate-mark,.shop-gate:hover .shop-gate-emblem{transform:translateY(-1px) scale(1.03);}
.shop-gate-kicker{grid-column:2;font-size:10.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:color-mix(in srgb,var(--gate-a) 78%,var(--text-primary));}
.shop-gate-title{grid-column:2;font-size:18px;font-weight:800;line-height:1.18;letter-spacing:-.01em;}
.shop-gate-title b{color:var(--gate-b);font-weight:900;margin-left:6px;}
.shop-gate-text{grid-column:2;font-size:12.5px;line-height:1.45;color:var(--text-muted);}
.shop-gate-reasons{display:grid;gap:2px;margin:6px 0;color:var(--text-subtle);}
.shop-gate-reasons span::before{content:'✓';color:#34d399;font-weight:900;margin-right:6px;}
/* the Cyber Check card on EVERY Home, in its verdict's colour (components/CyberShield.tsx, data-status): green Verified,
   orange Under review, red Failed, slate Pending / Not live — and the explanation: a reason not met yet wears "!", the
   build line a dot, and the claims still missing sit in a box under them */
.shop-gate-cyber[data-status="certified"]{--gate-a:#fde68a;--gate-b:#f5b82e;}   /* Verified + Overall 100 + compliance 100 (Paul, 2026-10-05): the CERTIFIED shield's gold */
.shop-gate-cyber[data-status="beta"]{--gate-a:#c4b5fd;--gate-b:#8b5cf6;}   /* every app not Verified yet (Paul, 2026-10-02): the BETA shield's violet */
.shop-gate-cyber[data-status="review"]{--gate-a:#fdba74;--gate-b:#fb923c;}
.shop-gate-cyber[data-status="failed"]{--gate-a:#fca5a5;--gate-b:#f87171;}
.shop-gate-cyber[data-status="pending"],.shop-gate-cyber[data-status="offline"]{--gate-a:#cbd5e1;--gate-b:#94a3b8;}
.shop-gate-reasons span[data-ok="false"]::before{content:'!';color:var(--gate-b);padding:0 2px;}
.shop-gate-reasons span[data-ok="info"]::before{content:'•';color:var(--text-muted);padding:0 1px;}
.shop-gate-open{display:grid;gap:4px;margin:0 0 8px;padding:8px 10px;border-radius:9px;background:color-mix(in srgb,var(--gate-b) 8%,transparent);border:1px solid color-mix(in srgb,var(--gate-b) 24%,transparent);color:var(--text-subtle);}
.shop-gate-open > span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.shop-gate-open em{font-style:normal;font-weight:800;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--gate-a) 82%,var(--text-primary));margin-right:6px;}
.shop-gate-open .shop-gate-more{color:var(--text-muted);font-size:11.5px;}
/* its layout: the HEADER ROW — the shield, the verdict and what it means, the QR code — then the EXPLANATION full width
   under a hairline: the reasons, the claims still missing, the way to the record (Paul, 2026-10-01: "fix the css") */
.shop-gate.shop-gate-cyber{grid-template-columns:92px minmax(0,1fr) auto;align-items:center;row-gap:3px;padding:16px 18px 16px 16px;}   /* 16px left like every card — the titles line up */
.shop-gate-cyber .shop-gate-emblem,.shop-gate-cyber .shop-gate-qrwrap{grid-row:1 / span 3;align-self:center;}
.shop-gate-cyber .shop-gate-title{font-size:20px;}
.shop-gate-cyber .shop-gate-text{font-size:13px;line-height:1.45;}
.shop-gate-detail{grid-column:1 / -1;display:grid;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid color-mix(in srgb,var(--gate-b) 22%,transparent);font-size:12.5px;line-height:1.45;color:var(--text-muted);}
.shop-gate-detail .shop-gate-reasons{margin:0;gap:3px;}
.shop-gate-detail .shop-gate-open{margin:0;}
.shop-gate-cta{font-size:12px;font-weight:700;color:color-mix(in srgb,var(--gate-a) 72%,var(--text-muted));}
.shop-gate-go,.shop-gate-qrwrap{grid-column:3;grid-row:1 / span 3;display:flex;flex-direction:column;align-items:center;gap:6px;}
.shop-gate-go i{font-style:normal;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;font-size:20px;font-weight:700;line-height:1;color:color-mix(in srgb,var(--gate-a) 75%,var(--text-primary));border:1px solid color-mix(in srgb,var(--gate-b) 45%,transparent);background:color-mix(in srgb,var(--gate-b) 14%,transparent);transition:transform .16s,background .16s;}
.shop-gate:hover .shop-gate-go i{transform:translateX(3px);background:color-mix(in srgb,var(--gate-b) 26%,transparent);}
.shop-gate-qr{width:78px;height:78px;border-radius:8px;background:#fff;padding:4px;display:block;}
.shop-gate-go small,.shop-gate-qrwrap small{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);white-space:nowrap;}
/* two-up (tablet): the two ways in side by side — a smaller seal, no arrow column; the third card keeps its row */
@media (min-width:640px) and (max-width:1023px){
  .shop-gate-public,.shop-gate-primary{grid-template-columns:60px minmax(0,1fr);column-gap:12px;padding:12px 14px;}
  .shop-gate-public .shop-gate-mark,.shop-gate-primary .shop-gate-mark{width:60px;height:60px;}
  .shop-gate-public .shop-gate-go,.shop-gate-primary .shop-gate-go{display:none;}
  .shop-gate-public .shop-gate-title,.shop-gate-primary .shop-gate-title{font-size:16px;}
}
/* phone: the two ways in are compact buttons — the seal over the title, nothing else */
@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;align-content:start;padding:12px;row-gap:6px;}
  .shop-gate-mark{grid-column:1;grid-row:auto;justify-self:start;width:48px;height:48px;}
  .shop-gate-kicker,.shop-gate-title,.shop-gate-text{grid-column:1;}
  .shop-gate-kicker,.shop-gate-text,.shop-gate-go{display:none;}
  .shop-gate-title{font-size:14px;line-height:1.25;}
}
/* phone: the third card (Cyber Check, Beta) keeps its words — they ARE the point: the seal beside them, the QR code under */
@media (max-width:639px){
  .shop-gate.shop-gate-cyber,.shop-gate.shop-gate-beta{grid-template-columns:auto minmax(0,1fr);justify-items:stretch;align-content:center;align-items:center;column-gap:12px;row-gap:2px;}
  .shop-gate.shop-gate-cyber{padding:14px;}
  .shop-gate-cyber .shop-gate-emblem{width:64px;height:75px;grid-row:1 / span 3;}
  .shop-gate-cyber .shop-gate-detail{order:1;margin-top:10px;padding-top:10px;}
  .shop-gate-beta .shop-gate-mark{grid-column:1;grid-row:span 3;width:60px;height:60px;}
  .shop-gate-cyber .shop-gate-kicker,.shop-gate-cyber .shop-gate-title,.shop-gate-cyber .shop-gate-text,
  .shop-gate-beta .shop-gate-kicker,.shop-gate-beta .shop-gate-title,.shop-gate-beta .shop-gate-text{grid-column:2;display:block;}
  .shop-gate-cyber .shop-gate-title,.shop-gate-beta .shop-gate-title{font-size:16px;} .shop-gate-cyber .shop-gate-text,.shop-gate-beta .shop-gate-text{font-size:12px;}
  .shop-gate-cyber .shop-gate-qrwrap{display:none;}   /* on the phone itself the QR cannot be scanned — the card is the link ("Scan or tap…") */
}
/* gate-marks:begin — GENERATED by appsitetm-sdk/helper/scripts/gate-marks.mjs; edit the drawing there */
.shop-gate-mark[data-mark=public]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='r' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23e9d5ff'/%3E%3Cstop offset='.45' stop-color='%23a78bfa'/%3E%3Cstop offset='1' stop-color='%236366f1'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%231a2a46'/%3E%3Cstop offset='.55' stop-color='%230f1b30'/%3E%3Cstop offset='1' stop-color='%23070d1a'/%3E%3C/linearGradient%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.22'/%3E%3Cstop offset='.48' stop-color='%23fff' stop-opacity='.03'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='n' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ddd6fe'/%3E%3Cstop offset='.5' stop-color='%23a78bfa'/%3E%3Cstop offset='1' stop-color='%236d28d9'/%3E%3C/linearGradient%3E%3ClinearGradient id='k' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23a78bfa'/%3E%3Cstop offset='1' stop-color='%236d28d9'/%3E%3C/linearGradient%3E%3CclipPath id='c'%3E%3Crect x='12' y='8' width='76' height='76' rx='17'/%3E%3C/clipPath%3E%3Cfilter id='d' x='-20%25' y='-10%25' width='140%25' height='135%25'%3E%3CfeDropShadow dx='0' dy='3' stdDeviation='3' flood-color='%23000' flood-opacity='.5'/%3E%3C/filter%3E%3Cfilter id='g' x='-40%25' y='-40%25' width='180%25' height='180%25'%3E%3CfeDropShadow dx='0' dy='0' stdDeviation='2.4' flood-color='%23a78bfa' flood-opacity='.9'/%3E%3C/filter%3E%3C/defs%3E%3Crect x='7' y='3' width='86' height='86' rx='22' fill='url(%23r)' filter='url(%23d)'/%3E%3Crect x='12' y='8' width='76' height='76' rx='17' fill='url(%23b)'/%3E%3Crect x='12' y='8' width='76' height='76' rx='17' fill='url(%23s)'/%3E%3Cpath d='M12 50 L88 20 L88 38 L12 70 Z' fill='%23fff' opacity='.045' clip-path='url(%23c)'/%3E%3Crect x='12.6' y='8.6' width='74.8' height='74.8' rx='16.4' fill='none' stroke='%23fff' stroke-opacity='.14' stroke-width='1.2'/%3E%3Ctext x='50' y='23' text-anchor='middle' font-family='-apple-system,BlinkMacSystemFont,Segoe UI,Inter,Roboto,Helvetica,Arial,sans-serif' font-size='7.2' font-weight='800' letter-spacing='2.2' fill='%23ddd6fe' opacity='.92'%3EAPPSITE%3C/text%3E%3Cpath d='M28 47 Q50 27 72 47 Q50 67 28 47 Z' fill='none' stroke='%23fff' stroke-width='4.6' stroke-linecap='round' stroke-linejoin='round' filter='url(%23g)'/%3E%3Ccircle cx='50' cy='47' r='8.2' fill='%23a78bfa'/%3E%3Ccircle cx='50' cy='47' r='4.2' fill='%23fff' filter='url(%23g)'/%3E%3Ccircle cx='53' cy='44' r='1.6' fill='%23fff'/%3E%3Cpath d='M3 68 L15 65.5 V82.5 L3 80 L7 74 Z' fill='url(%23k)'/%3E%3Cpath d='M97 68 L85 65.5 V82.5 L97 80 L93 74 Z' fill='url(%23k)'/%3E%3Cpath d='M15 82.5 V86 L20 82.5 Z' fill='%23000' opacity='.45'/%3E%3Cpath d='M85 82.5 V86 L80 82.5 Z' fill='%23000' opacity='.45'/%3E%3Crect x='15' y='65.5' width='70' height='17' fill='url(%23n)'/%3E%3Crect x='15' y='65.5' width='70' height='6.5' fill='%23fff' opacity='.22'/%3E%3Ctext x='50' y='77.3' text-anchor='middle' font-family='-apple-system,BlinkMacSystemFont,Segoe UI,Inter,Roboto,Helvetica,Arial,sans-serif' font-size='8.4' font-weight='800' letter-spacing='1.4' fill='%231e0a3c'%3EPUBLIC%3C/text%3E%3C/svg%3E");}
.shop-gate-mark[data-mark=desk]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='r' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23a5f3fc'/%3E%3Cstop offset='.45' stop-color='%2322d3ee'/%3E%3Cstop offset='1' stop-color='%233b82f6'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%231a2a46'/%3E%3Cstop offset='.55' stop-color='%230f1b30'/%3E%3Cstop offset='1' stop-color='%23070d1a'/%3E%3C/linearGradient%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.22'/%3E%3Cstop offset='.48' stop-color='%23fff' stop-opacity='.03'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='n' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23a5f3fc'/%3E%3Cstop offset='.5' stop-color='%2322d3ee'/%3E%3Cstop offset='1' stop-color='%230e7490'/%3E%3C/linearGradient%3E%3ClinearGradient id='k' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2322d3ee'/%3E%3Cstop offset='1' stop-color='%230e7490'/%3E%3C/linearGradient%3E%3CclipPath id='c'%3E%3Crect x='12' y='8' width='76' height='76' rx='17'/%3E%3C/clipPath%3E%3Cfilter id='d' x='-20%25' y='-10%25' width='140%25' height='135%25'%3E%3CfeDropShadow dx='0' dy='3' stdDeviation='3' flood-color='%23000' flood-opacity='.5'/%3E%3C/filter%3E%3Cfilter id='g' x='-40%25' y='-40%25' width='180%25' height='180%25'%3E%3CfeDropShadow dx='0' dy='0' stdDeviation='2.4' flood-color='%2322d3ee' flood-opacity='.9'/%3E%3C/filter%3E%3C/defs%3E%3Crect x='7' y='3' width='86' height='86' rx='22' fill='url(%23r)' filter='url(%23d)'/%3E%3Crect x='12' y='8' width='76' height='76' rx='17' fill='url(%23b)'/%3E%3Crect x='12' y='8' width='76' height='76' rx='17' fill='url(%23s)'/%3E%3Cpath d='M12 50 L88 20 L88 38 L12 70 Z' fill='%23fff' opacity='.045' clip-path='url(%23c)'/%3E%3Crect x='12.6' y='8.6' width='74.8' height='74.8' rx='16.4' fill='none' stroke='%23fff' stroke-opacity='.14' stroke-width='1.2'/%3E%3Ctext x='50' y='23' text-anchor='middle' font-family='-apple-system,BlinkMacSystemFont,Segoe UI,Inter,Roboto,Helvetica,Arial,sans-serif' font-size='7.2' font-weight='800' letter-spacing='2.2' fill='%23a5f3fc' opacity='.92'%3EAPPSITE%3C/text%3E%3Crect x='31.5' y='32.5' width='16.5' height='18.5' rx='1.4' fill='%2322d3ee' opacity='.55'/%3E%3Crect x='52' y='32.5' width='16.5' height='18.5' rx='1.4' fill='%23a78bfa' opacity='.5'/%3E%3Crect x='28' y='29.5' width='44' height='24.5' rx='4' fill='none' stroke='%23fff' stroke-width='4.6' stroke-linecap='round' stroke-linejoin='round' filter='url(%23g)'/%3E%3Cpath d='M50 29.5 V54 M50 54 V58.5 M42 59 H58' fill='none' stroke='%23fff' stroke-width='4.6' stroke-linecap='round' stroke-linejoin='round' filter='url(%23g)'/%3E%3Cpath d='M3 68 L15 65.5 V82.5 L3 80 L7 74 Z' fill='url(%23k)'/%3E%3Cpath d='M97 68 L85 65.5 V82.5 L97 80 L93 74 Z' fill='url(%23k)'/%3E%3Cpath d='M15 82.5 V86 L20 82.5 Z' fill='%23000' opacity='.45'/%3E%3Cpath d='M85 82.5 V86 L80 82.5 Z' fill='%23000' opacity='.45'/%3E%3Crect x='15' y='65.5' width='70' height='17' fill='url(%23n)'/%3E%3Crect x='15' y='65.5' width='70' height='6.5' fill='%23fff' opacity='.22'/%3E%3Ctext x='50' y='77.3' text-anchor='middle' font-family='-apple-system,BlinkMacSystemFont,Segoe UI,Inter,Roboto,Helvetica,Arial,sans-serif' font-size='8.4' font-weight='800' letter-spacing='1.4' fill='%23042f3a'%3ESTAFF%3C/text%3E%3C/svg%3E");}
.shop-gate-mark[data-mark=desklite]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='r' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23a5f3fc'/%3E%3Cstop offset='.45' stop-color='%2322d3ee'/%3E%3Cstop offset='1' stop-color='%233b82f6'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%231a2a46'/%3E%3Cstop offset='.55' stop-color='%230f1b30'/%3E%3Cstop offset='1' stop-color='%23070d1a'/%3E%3C/linearGradient%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.22'/%3E%3Cstop offset='.48' stop-color='%23fff' stop-opacity='.03'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='n' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23a5f3fc'/%3E%3Cstop offset='.5' stop-color='%2322d3ee'/%3E%3Cstop offset='1' stop-color='%230e7490'/%3E%3C/linearGradient%3E%3ClinearGradient id='k' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2322d3ee'/%3E%3Cstop offset='1' stop-color='%230e7490'/%3E%3C/linearGradient%3E%3CclipPath id='c'%3E%3Crect x='12' y='8' width='76' height='76' rx='17'/%3E%3C/clipPath%3E%3Cfilter id='d' x='-20%25' y='-10%25' width='140%25' height='135%25'%3E%3CfeDropShadow dx='0' dy='3' stdDeviation='3' flood-color='%23000' flood-opacity='.5'/%3E%3C/filter%3E%3Cfilter id='g' x='-40%25' y='-40%25' width='180%25' height='180%25'%3E%3CfeDropShadow dx='0' dy='0' stdDeviation='2.4' flood-color='%2322d3ee' flood-opacity='.9'/%3E%3C/filter%3E%3C/defs%3E%3Crect x='7' y='3' width='86' height='86' rx='22' fill='url(%23r)' filter='url(%23d)'/%3E%3Crect x='12' y='8' width='76' height='76' rx='17' fill='url(%23b)'/%3E%3Crect x='12' y='8' width='76' height='76' rx='17' fill='url(%23s)'/%3E%3Cpath d='M12 50 L88 20 L88 38 L12 70 Z' fill='%23fff' opacity='.045' clip-path='url(%23c)'/%3E%3Crect x='12.6' y='8.6' width='74.8' height='74.8' rx='16.4' fill='none' stroke='%23fff' stroke-opacity='.14' stroke-width='1.2'/%3E%3Ctext x='50' y='23' text-anchor='middle' font-family='-apple-system,BlinkMacSystemFont,Segoe UI,Inter,Roboto,Helvetica,Arial,sans-serif' font-size='7.2' font-weight='800' letter-spacing='2.2' fill='%23a5f3fc' opacity='.92'%3EAPPSITE%3C/text%3E%3Crect x='43.5' y='37' width='13' height='18' rx='1.5' fill='%2322d3ee' opacity='.55'/%3E%3Crect x='39.5' y='31' width='21' height='32' rx='4.5' fill='none' stroke='%23fff' stroke-width='4.6' stroke-linecap='round' stroke-linejoin='round' filter='url(%23g)'/%3E%3Cpath d='M47 59 H53' fill='none' stroke='%23fff' stroke-width='4.6' stroke-linecap='round' stroke-linejoin='round' filter='url(%23g)'/%3E%3Cpath d='M3 68 L15 65.5 V82.5 L3 80 L7 74 Z' fill='url(%23k)'/%3E%3Cpath d='M97 68 L85 65.5 V82.5 L97 80 L93 74 Z' fill='url(%23k)'/%3E%3Cpath d='M15 82.5 V86 L20 82.5 Z' fill='%23000' opacity='.45'/%3E%3Cpath d='M85 82.5 V86 L80 82.5 Z' fill='%23000' opacity='.45'/%3E%3Crect x='15' y='65.5' width='70' height='17' fill='url(%23n)'/%3E%3Crect x='15' y='65.5' width='70' height='6.5' fill='%23fff' opacity='.22'/%3E%3Ctext x='50' y='77.3' text-anchor='middle' font-family='-apple-system,BlinkMacSystemFont,Segoe UI,Inter,Roboto,Helvetica,Arial,sans-serif' font-size='8.4' font-weight='800' letter-spacing='1.4' fill='%23042f3a'%3ESTAFF%3C/text%3E%3C/svg%3E");}
.shop-gate-mark[data-mark=beta]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='r' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fde68a'/%3E%3Cstop offset='.45' stop-color='%23f59e0b'/%3E%3Cstop offset='1' stop-color='%23ea580c'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%231a2a46'/%3E%3Cstop offset='.55' stop-color='%230f1b30'/%3E%3Cstop offset='1' stop-color='%23070d1a'/%3E%3C/linearGradient%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.22'/%3E%3Cstop offset='.48' stop-color='%23fff' stop-opacity='.03'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='n' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fed7aa'/%3E%3Cstop offset='.5' stop-color='%23fb923c'/%3E%3Cstop offset='1' stop-color='%23c2410c'/%3E%3C/linearGradient%3E%3ClinearGradient id='k' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fb923c'/%3E%3Cstop offset='1' stop-color='%23c2410c'/%3E%3C/linearGradient%3E%3CclipPath id='c'%3E%3Crect x='12' y='8' width='76' height='76' rx='17'/%3E%3C/clipPath%3E%3Cfilter id='d' x='-20%25' y='-10%25' width='140%25' height='135%25'%3E%3CfeDropShadow dx='0' dy='3' stdDeviation='3' flood-color='%23000' flood-opacity='.5'/%3E%3C/filter%3E%3Cfilter id='g' x='-40%25' y='-40%25' width='180%25' height='180%25'%3E%3CfeDropShadow dx='0' dy='0' stdDeviation='2.4' flood-color='%23fbbf24' flood-opacity='.9'/%3E%3C/filter%3E%3C/defs%3E%3Crect x='7' y='3' width='86' height='86' rx='22' fill='url(%23r)' filter='url(%23d)'/%3E%3Crect x='12' y='8' width='76' height='76' rx='17' fill='url(%23b)'/%3E%3Crect x='12' y='8' width='76' height='76' rx='17' fill='url(%23s)'/%3E%3Cpath d='M12 50 L88 20 L88 38 L12 70 Z' fill='%23fff' opacity='.045' clip-path='url(%23c)'/%3E%3Crect x='12.6' y='8.6' width='74.8' height='74.8' rx='16.4' fill='none' stroke='%23fff' stroke-opacity='.14' stroke-width='1.2'/%3E%3Ctext x='50' y='23' text-anchor='middle' font-family='-apple-system,BlinkMacSystemFont,Segoe UI,Inter,Roboto,Helvetica,Arial,sans-serif' font-size='7.2' font-weight='800' letter-spacing='2.2' fill='%23fde68a' opacity='.92'%3EAPPSITE%3C/text%3E%3Cpath d='M38 52 H62 L66.5 59.5 Q68 62.5 64.5 62.5 H35.5 Q32 62.5 33.5 59.5 Z' fill='%23f59e0b' opacity='.75'/%3E%3Cpath d='M44.5 31 V43 L33.5 59.5 Q32 62.5 35.5 62.5 H64.5 Q68 62.5 66.5 59.5 L55.5 43 V31 M41 31 H59' fill='none' stroke='%23fff' stroke-width='4.6' stroke-linecap='round' stroke-linejoin='round' filter='url(%23g)'/%3E%3Ccircle cx='47' cy='56' r='1.6' fill='%23fff'/%3E%3Ccircle cx='53.5' cy='53' r='1.2' fill='%23fff'/%3E%3Cpath d='M3 68 L15 65.5 V82.5 L3 80 L7 74 Z' fill='url(%23k)'/%3E%3Cpath d='M97 68 L85 65.5 V82.5 L97 80 L93 74 Z' fill='url(%23k)'/%3E%3Cpath d='M15 82.5 V86 L20 82.5 Z' fill='%23000' opacity='.45'/%3E%3Cpath d='M85 82.5 V86 L80 82.5 Z' fill='%23000' opacity='.45'/%3E%3Crect x='15' y='65.5' width='70' height='17' fill='url(%23n)'/%3E%3Crect x='15' y='65.5' width='70' height='6.5' fill='%23fff' opacity='.22'/%3E%3Ctext x='50' y='77.3' text-anchor='middle' font-family='-apple-system,BlinkMacSystemFont,Segoe UI,Inter,Roboto,Helvetica,Arial,sans-serif' font-size='8.4' font-weight='800' letter-spacing='1.4' fill='%232a1000'%3EBETA%3C/text%3E%3C/svg%3E");}
/* gate-marks:end */

.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%;}
/* "See what X does" (#public) lands BELOW the sticky header, not under it — its heading was hidden behind the bar, so
   the card looked like it did nothing (Paul, 2026-10-01: "one of the links dont work") */
#public{scroll-margin-top:150px;} @media (max-width:767px){ #public{scroll-margin-top:118px;} }

/* ── 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);}
/* Industries — where the module is used (ModuleIndustries, under the picture row, above "What X adds"): one tab per
   industry, the chosen industry's picture and description, and the modules recommended for it as the module-card slider */
.pd-platform-industries{border:1px solid var(--border);border-radius:16px;background:var(--bg-surface);padding:20px 22px;display:flex;flex-direction:column;gap:10px;}
.pd-platform-industries h3{font-size:20px;font-weight:800;color:var(--text-primary);margin:4px 0 0;}
.pd-ind-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;}
.pd-ind-tab{font-size:12px;font-weight:700;line-height:16px;padding:6px 11px;border-radius:999px;border:1px solid var(--border);background:var(--bg-base);color:var(--text-muted);cursor:pointer;transition:border-color .15s,color .15s;}
.pd-ind-tab:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--border));color:var(--text-primary);}
.pd-ind-tab[aria-selected="true"]{background:color-mix(in srgb,var(--accent) 16%,transparent);border-color:color-mix(in srgb,var(--accent) 55%,var(--border));color:var(--accent);}
.pd-ind-page{display:flex;flex-direction:column;gap:12px;margin-top:6px;}
.pd-ind-panel{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:18px;align-items:center;border:1px solid var(--border);border-radius:14px;background:var(--bg-base);padding:14px;}
.pd-ind-pic{aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:#0b0e14;border:1px solid var(--border);} .pd-ind-pic img{width:100%;height:100%;object-fit:cover;display:block;}
.pd-ind-copy h4{font-size:17px;font-weight:800;line-height:1.2;color:var(--text-primary);margin:0 0 6px;} .pd-ind-copy .pw-open{display:inline-block;margin-top:8px;}
@media (max-width:639px){ .pd-platform-industries{padding:16px;} .pd-ind-panel{grid-template-columns:1fr;gap:12px;} }
/* "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;} }