/* Client-facing introductions and the existing plugin workspaces. */
body.module-page{background:var(--brand-canvas);color:var(--brand-text);margin:0}
.module-header{max-width:1200px;margin:auto;padding:12px 32px;min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--brand-border)}
.module-header .topbar-right{display:flex;align-items:center;gap:24px}
.back-catalog,.back-intro{font-size:12px;font-weight:500;color:var(--brand-muted)}
.back-catalog:hover,.back-intro:hover{color:var(--brand-link)}
.module-main{max-width:1200px;margin:auto;padding:32px 32px 56px;outline:none}
.intro-breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:10px 0;list-style:none;padding:0;margin:0;color:var(--brand-muted);font-size:12px;line-height:1.5}
.intro-breadcrumb li+li:before{content:'/';display:inline-block;margin:0 12px;color:var(--brand-orange)}
.intro-breadcrumb a{color:var(--brand-muted);text-decoration:none}
.intro-breadcrumb a:hover{color:var(--brand-link)}
.intro-breadcrumb [aria-current]{color:var(--brand-text)}
.intro-hero{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:56px;align-items:center;margin:48px 0 56px}
.intro-category{font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-link);margin:0 0 16px}
.intro-copy h1{font-size:clamp(36px,4.2vw,54px);font-weight:600;letter-spacing:-.04em;line-height:1.1;margin:0 0 12px}
.intro-tagline{font-size:clamp(20px,2.2vw,27px);font-weight:400;letter-spacing:-.02em;line-height:1.3;color:var(--brand-muted);margin:0 0 24px}
.intro-explanation{font-size:16px;line-height:1.75;color:var(--brand-muted);max-width:720px;margin:0}
.intro-top-action{margin-top:28px}
.intro-art{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-width:0}

.optical-icon{position:relative;display:block;width:240px;height:240px}
.optical-icon>img{display:block;width:100%;height:100%;object-fit:contain}
.optical-glyph{position:absolute;inset:0;display:grid;place-items:center;color:var(--brand-cobalt-deep);transform:translate(-2px,1px) rotate(-7deg)}
.optical-glyph svg{width:58px;height:58px;filter:drop-shadow(0 1px 0 #ffffff65)}
.intro-story{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(240px,1fr);gap:48px;border-top:1px solid var(--brand-border);padding-top:40px;align-items:start}
.intro-narrative h2,.intro-how>h2{font-size:25px;line-height:1.3;font-weight:500;letter-spacing:-.025em;margin:0 0 20px}
.intro-narrative p{font-size:15px;line-height:1.8;color:var(--brand-muted);margin:0 0 18px}
.intro-narrative p:last-child{margin-bottom:0}
.intro-example{background:var(--brand-surface);border:1px solid var(--brand-border);border-radius:18px;padding:28px}
.example-mark{color:var(--brand-link);display:grid;place-items:center;width:40px;height:40px;background:var(--brand-soft);border-radius:11px;margin-bottom:22px}
.intro-example h2{font-size:16px;font-weight:500;margin:0 0 12px}
.intro-example p{font-size:15px;line-height:1.8;color:var(--brand-muted);margin:0}
.intro-how{margin-top:44px}
.intro-how ul{padding:0;margin:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.intro-how li{display:flex;gap:12px;align-items:flex-start}
.feature-dot{width:5px;height:5px;background:var(--brand-orange);border-radius:50%;flex-shrink:0;margin-top:8px}
.intro-how h3{font-size:15px;line-height:1.4;font-weight:500;margin:0 0 10px}
.intro-how p{font-size:14px;line-height:1.7;color:var(--brand-muted);margin:0}
.intro-launch{display:flex;align-items:center;justify-content:space-between;gap:48px;margin-top:48px;padding-top:32px;border-top:1px solid var(--brand-border)}
.intro-launch>div:first-child{max-width:650px}
.intro-launch h2{font-size:18px;letter-spacing:-.02em;font-weight:500;margin:0 0 10px}
.intro-launch p{font-size:14px;line-height:1.75;margin:0;color:var(--brand-muted)}
.launch-control{flex-shrink:0}
:root .module-launch{display:inline-flex;align-items:center;justify-content:center;gap:20px;padding:15px 22px;background:var(--brand-cobalt);border:1px solid var(--brand-cobalt);color:#ffffff;border-radius:10px;font-size:14px;font-weight:500;line-height:1.4;min-height:50px;text-decoration:none;transition:background 180ms ease}
:root .module-launch:hover{background:var(--brand-cobalt-hover);border-color:var(--brand-cobalt-hover)}
.module-launch:focus-visible,.intro-breadcrumb a:focus-visible{outline:3px solid var(--brand-link);outline-offset:4px}
.module-launch svg{width:18px;height:18px;flex-shrink:0}
.plugin-workspace{max-width:900px;margin:0 auto}
.plugin-heading{display:flex;align-items:center;gap:16px;margin:24px 0}
.plugin-heading-icon{width:48px;height:48px;display:grid;place-items:center;border:1px solid var(--brand-border);background:var(--brand-soft);color:var(--brand-link);border-radius:12px;flex-shrink:0}
.plugin-heading p{color:var(--brand-accent-text);font-size:11px;margin-bottom:6px}
.plugin-heading h1{font-size:clamp(25px,4vw,34px);font-weight:500;letter-spacing:-.03em;line-height:1.15}
:root .module-page .plugin-tools{padding:28px;background:var(--brand-surface);border:1px solid var(--brand-border);border-radius:18px;color:var(--brand-text);margin-bottom:20px}
:root .module-page .plugin-tools h3{font-size:18px;margin:0 0 18px;color:var(--brand-text)}
:root .module-page .plugin-tools :is(input,select,textarea){background:var(--brand-canvas);color:var(--brand-text);border-color:var(--brand-border)}
:root .module-page .plugin-tools :is(label,p){color:var(--brand-muted)}
:root .module-page .plugin-tools .primary-button{background:var(--brand-cobalt);color:#ffffff;font-weight:500}
:root .module-page .plugin-tools .primary-button:hover{background:var(--brand-cobalt-hover)}
:root .module-page .plugin-tools .secondary-button{background:var(--brand-surface);color:var(--brand-text);border-color:var(--brand-border)}
:root .module-page .plugin-tools :is(.inline-result,.chat-message,.check-list label){border-color:var(--brand-border)}
:root .module-page .plugin-tools .connection-row button{color:var(--brand-link)}
:root .module-page .plugin-tools progress{width:100%;accent-color:var(--brand-cobalt);margin-top:16px}
.module-not-found{max-width:600px;padding:60px 0}
.module-not-found h1{font-weight:500;font-size:42px;line-height:1.1;margin:18px 0}
.module-not-found p{margin-bottom:24px;color:var(--brand-muted)}

@media(max-width:900px){
 .intro-hero{grid-template-columns:minmax(0,1fr) 180px;gap:28px}.optical-icon{width:180px;height:180px}.optical-glyph svg{width:46px;height:46px}
 .intro-story{gap:28px;grid-template-columns:minmax(0,1.4fr) minmax(220px,1fr)}.intro-example{padding:22px}.intro-launch{gap:28px}
}
@media(max-width:600px){
 .module-header{padding:12px 20px;gap:12px;min-height:84px;flex-wrap:wrap}.module-header .topbar-right{gap:12px;margin-left:auto}.back-catalog{display:none}
 .module-main{padding:24px 20px 40px}.intro-breadcrumb{font-size:11px}.intro-breadcrumb li+li:before{margin:0 8px}
 .intro-hero{grid-template-columns:minmax(0,1fr) 84px;gap:16px;margin:32px 0 36px;position:relative;align-items:start}
 .intro-copy{grid-column:1/-1}.intro-category{padding-right:98px;min-height:64px;margin-bottom:18px}.intro-copy h1{font-size:36px;overflow-wrap:normal}.intro-tagline{font-size:21px;margin-top:20px}.intro-explanation{font-size:15px}
 .intro-art{position:absolute;right:0;top:0}.optical-icon{width:84px;height:84px}.optical-glyph svg{width:24px;height:24px}
 .intro-story{grid-template-columns:1fr;gap:24px;padding-top:30px}.intro-example{padding:22px}.example-mark{margin-bottom:16px}
 .intro-narrative h2,.intro-how>h2{font-size:24px}.intro-how{margin-top:34px}.intro-how ul{grid-template-columns:1fr;gap:24px}
 .intro-launch{flex-direction:column;align-items:stretch;gap:24px;margin-top:36px;padding-top:28px}.module-launch{width:100%}
 :root .module-page .plugin-tools{padding:18px}.plugin-heading{margin:22px 0}.plugin-heading h1{font-size:27px}
}
@media(prefers-reduced-motion:reduce){.module-launch{transition:none}}

.portal-launch-options{display:flex;flex-wrap:wrap;gap:12px}
.intro-launch:has(.portal-launch-options){align-items:flex-start;flex-wrap:wrap}
.intro-launch:has(.portal-launch-options) .launch-control{flex-shrink:1}
@media(max-width:600px){.portal-launch-options{flex-direction:column}.portal-launch-options .module-launch{width:100%}}

.intro-why{max-width:880px;border-top:1px solid var(--brand-border);padding:32px 0 36px}.intro-why h2{font-size:25px;line-height:1.3;font-weight:500;letter-spacing:-.025em;margin:0 0 16px;color:var(--brand-text)}.intro-why p{font-size:16px;line-height:1.8;color:var(--brand-muted);margin:0}@media(max-width:600px){.intro-why{padding-block:26px}.intro-why h2{font-size:22px}.intro-why p{font-size:15px}}

/* Compact editorial example, shared by every module introduction. */
.intro-example{display:grid;grid-template-columns:24px minmax(0,1fr);align-items:start;gap:14px;padding:22px;border:1px solid #c7d2ff99;border-radius:16px;background:linear-gradient(135deg,#ffffffed,#e9edff70);box-shadow:inset 0 1px 0 #ffffff,0 9px 24px -22px #12298c55;transition:border-color 180ms ease,box-shadow 180ms ease}
.intro-example .example-mark{width:24px;height:24px;margin:1px 0 0;background:none;border-radius:0;color:var(--brand-link)}
.intro-example .example-mark svg{width:19px;height:19px;display:block;stroke-width:1.7}
.intro-example h2{font-size:17px;font-weight:600;line-height:1.4;margin:0 0 10px;color:var(--brand-text)}
.intro-example p{font-size:16px;line-height:1.7;color:var(--brand-muted);margin:0}
:root[data-theme="dark"] .intro-example{background:linear-gradient(135deg,#90a5ff0e,#050d1dd9);border-color:#90a5ff3d;box-shadow:inset 0 1px 0 #ffffff0f,0 9px 24px -22px #00000060}
@media(hover:hover){.intro-example:hover{border-color:#90a5ff99;box-shadow:inset 0 1px 0 #ffffff33,0 12px 26px -22px #12298c66}}
@media(max-width:600px){.intro-example{padding:19px;gap:12px;grid-template-columns:22px minmax(0,1fr)}.intro-example h2{font-size:17px}.intro-example p{font-size:16px}}
@media(prefers-reduced-motion:reduce){.intro-example{transition:none}}

/* Bonus Protection Plugin: approved product-specific artwork and paired mode descriptions. */
.bonus-product-page .intro-hero{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:32px}
:root .bonus-module-art{width:100%;height:auto;aspect-ratio:16/9}
:root .bonus-module-art img{width:100%;height:auto;object-fit:contain;filter:none}
:root .bonus-module-art .bonus-art-dark{display:none}
:root[data-theme="dark"] .bonus-module-art .bonus-art-light{display:none}
:root[data-theme="dark"] .bonus-module-art .bonus-art-dark{display:block}
.bonus-modes{margin:0 0 44px}
.bonus-modes>h2{font-size:25px;font-weight:600;line-height:1.3;letter-spacing:-.025em;margin:0 0 24px}
.bonus-mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.bonus-mode{padding:28px;border:1px solid var(--brand-border);border-radius:18px;background:var(--brand-surface)}
.bonus-mode-number{display:block;color:var(--brand-accent-text);font-size:12px;font-weight:600;margin-bottom:20px}
.bonus-mode h3{font-size:21px;font-weight:600;line-height:1.3;margin:0 0 14px;letter-spacing:-.02em}
.bonus-mode p{font-size:15px;line-height:1.8;color:var(--brand-muted);margin:0}
:root .module-launch.bonus-contact{background:transparent;border-color:var(--brand-border);color:var(--brand-text)}
:root .module-launch.bonus-contact:hover{border-color:var(--brand-link);color:var(--brand-link)}
.bonus-product-page .intro-launch{align-items:flex-start;flex-wrap:wrap}
.bonus-product-page .launch-control{flex-shrink:1}
@media(max-width:900px){.bonus-product-page .intro-hero{grid-template-columns:1fr;gap:16px}.bonus-product-page .intro-art{max-width:620px;justify-self:center;width:100%}}
@media(max-width:600px){.bonus-product-page .intro-hero{display:flex;flex-direction:column;gap:24px}.bonus-product-page .intro-art{position:static}.bonus-product-page .intro-category{padding-right:0;min-height:0}.bonus-mode-grid{grid-template-columns:1fr;gap:16px}.bonus-mode{padding:24px}.bonus-modes>h2{font-size:24px}}

.bonus-product-page{--brand-canvas:#ffffff}
:root[data-theme="dark"] .bonus-product-page{--brand-canvas:#071322}