/* The original eight-platform composition, scoped to Ink and Space. */
.ink-site .platforms-section .platform-intro{max-width:630px!important;font:15px/1.85 var(--ink-body);color:var(--ink-platinum);margin:20px 0 0}
.platform-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:48px 0 28px}
.platform-card{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;min-height:164px;margin:0;padding:29px 18px;border:1px solid var(--ink-line-soft);background:var(--ink-surface);text-align:center;transition:transform .4s var(--ink-ease),border-color .4s var(--ink-ease);--platform-pixel-1:var(--ink-paper);--platform-pixel-2:var(--ink-platinum);--platform-pixel-3:var(--ink-paper);--platform-pixel-4:var(--ink-platinum)}
.platform-card:hover,.platform-card:focus-visible,.platform-card[data-pixel-active]{transform:translateY(-3px);border-color:var(--ink-line)}
.platform-card:focus-visible{outline:2px solid var(--ink-paper);outline-offset:4px}
.platform-card> :not(canvas){position:relative;z-index:1}
.platform-logo{display:flex;align-items:center;justify-content:center;height:28px}
.platform-logo svg{display:block;height:24px;width:auto;max-width:100px;color:var(--ink-paper);opacity:.65;transition:opacity .4s var(--ink-ease)}
.platform-card:hover .platform-logo svg,.platform-card:focus-visible .platform-logo svg,.platform-card[data-pixel-active] .platform-logo svg{opacity:1}
.platform-card h3{font:500 12px/1.5 var(--ink-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-paper);margin:0}
.platform-card p{font:12px/1.6 var(--ink-body);color:var(--ink-platinum);margin:0;max-width:170px}
.platform-card canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.38}
.ink-site .platforms-section .platform-note{font:12px/1.85 var(--ink-body);color:var(--ink-platinum);max-width:790px!important;margin:0 0 20px}
/* These colours identify third-party platforms only. Studio UI uses the brand tokens. */
.platform-card[data-platform=wordpress]{--platform-pixel-1:#21759b;--platform-pixel-2:#0073aa;--platform-pixel-3:#007cba;--platform-pixel-4:#1e1e1e}
.platform-card[data-platform=webflow]{--platform-pixel-1:#4353ff;--platform-pixel-2:#146ef5;--platform-pixel-3:#0052d9;--platform-pixel-4:#1f1f1f}
.platform-card[data-platform=shopify]{--platform-pixel-1:#95bf47;--platform-pixel-2:#5e8e3e;--platform-pixel-3:#2c6a3f;--platform-pixel-4:#000000}
.platform-card[data-platform=woocommerce]{--platform-pixel-1:#7f54b3;--platform-pixel-2:#96588a;--platform-pixel-3:#513b78;--platform-pixel-4:#231f20}
.platform-card[data-platform=squarespace]{--platform-pixel-1:#000000;--platform-pixel-2:#222222;--platform-pixel-3:#444444;--platform-pixel-4:#ffffff}
.platform-card[data-platform=custom-html]{--platform-pixel-1:#e34f26;--platform-pixel-2:#1572b6;--platform-pixel-3:#f16529;--platform-pixel-4:#264de4}
.platform-card[data-platform=cloudflare]{--platform-pixel-1:#f6821f;--platform-pixel-2:#fbad41;--platform-pixel-3:#f48120;--platform-pixel-4:#1a1a2e}
.platform-card[data-platform=calendly]{--platform-pixel-1:#006bff;--platform-pixel-2:#0056cc;--platform-pixel-3:#004499;--platform-pixel-4:#1a1a1a}
@media(max-width:1050px){.platform-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){.platform-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:32px}.platform-card{min-height:154px;padding:24px 12px}.ink-site .platforms-section .platform-intro{font-size:14px}}
@media(max-width:360px){.platform-grid{gap:12px}.platform-card{padding:22px 8px}.platform-card h3{font-size:11px;letter-spacing:.035em}.platform-card p{font-size:11px}}
@media(prefers-reduced-motion:reduce){.platform-card,.platform-logo svg{transition:none}.platform-card:hover,.platform-card:focus-visible,.platform-card[data-pixel-active]{transform:none}}
@media print{.platform-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.platform-card{break-inside:avoid;min-height:130px;transform:none}.platform-card canvas{display:none}}
