/* Product-module injected CSS
  Styles product description modules (previously "posters").
  Provides a tall card with colored accents, large headings,
  icon-driven feature rows, and optional server-specific blocks.
*/

:root{
  --bg:#080808;
  --panel:#0f0f10;
  --muted:#9ca3af;
  --white:#ffffff;
  --red:#ef4444;
  --purple:#7c3aed;
  --green:#10b981;
  --accent:#ff2d55;
  --page-gap:20px;
  --max-width:780px;
  --gutter:28px;
}

/* Safety override: prevent prose image rules from adding extra vertical margins
   (Targets selectors like .prose :where(img):not(:where([class~="not-prose"],...))).
   We only neutralize vertical margins so injected content doesn't get unexpected spacing.
*/
.prose :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.injected-product-header {
	background: transparent;
}

.product-module{
  width:100%;
  /* allow the poster to fill the host/container width when injected */
  max-width:none;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  color:var(--white);
  font-family: 'Oxanium', 'Montserrat', 'Segoe UI', Roboto, Arial, sans-serif;
  border-radius:8px;
  /* make top/bottom padding equal to remove the extra bottom space */
  padding:28px;
  box-sizing:border-box;
  position:relative;
  box-shadow:0 8px 30px rgba(0,0,0,0.6);
  overflow:hidden;
  background: var(--header-bg);
}

.product-module--shared{background:rgba(245,245,248,0.15);color:#f8fafc;border:1px solid rgba(245,245,248,0.3)}
.product-module--zgrad{background:rgba(228,62,77,0.15);color:#2b0508;border:1px solid rgba(228,62,77,0.3)}
.product-module--sandbox{background:rgba(16,185,129,0.15);color:#ffffff;border:1px solid rgba(16,185,129,0.3)}

/* Slight inner outline to give punch */
.product-module--shared::after,.product-module--zgrad::after,.product-module--sandbox::after{content:'';position:absolute;inset:0;border-radius:8px;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.02)}

.product-module::before{ /* remove the top stripe so header doesn't carry a separate background */
  display:none; /* totally remove the header/top-stripe background */
}
.product-module > *{position:relative;z-index:1} /* ensure content sits above any decorative elements */

/* Force white text inside product modules (headings, paragraphs, and feature text) */
.product-module, .product-module h1, .product-module h2, .product-module h3, .product-module h4, .product-module p, .product-module .section-text, .product-module .module-feature-text, .product-module .module-feature-title, .product-module .module-sub, .product-module .module-title { color: #ffffff !important }

/* Grid wrapper for multiple product modules */
.module-grid{display:flex;flex-direction:column;gap:1rem;width:100%}
.module-grid > .product-module{margin:0}

.module-header{display:flex;gap:12px;align-items:flex-start;padding-left:0}
.module-header-content{margin-left:0;padding-left:0}
.module-title{font-size:48px;letter-spacing:2px;margin:6px 0 6px 0;font-weight:800;text-transform:uppercase;color:var(--white);text-shadow:none;text-align:left}
.module-sub{color:var(--red);font-weight:800;letter-spacing:0.6px;margin:0;font-size:13px;text-align:left}

.module-features{margin-top:18px;padding-left:0;display:grid;gap:20px}
.module-feature{display:flex;gap:16px;align-items:flex-start;margin-bottom:0}
.module-icon{width:56px;height:56px;border-radius:10px;background:rgba(255,255,255,0.03);display:inline-flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0}
.module-body{flex:1}
.module-feature-title{font-size:20px;margin:0 0 6px 0;font-weight:800;text-align:left}
.module-feature-text{color:var(--muted);margin:0 0 8px 0;text-align:left}

.module-server-sections{display:block;gap:18px;margin-top:22px;padding-left:0}
.module-zgrad,.module-sandbox{padding:14px;border-radius:8px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));border:1px solid rgba(255,255,255,0.03)}
.section-title{font-weight:800;color:var(--muted);letter-spacing:1px;font-size:12px;text-align:left}
.section-heading{font-size:22px;margin:6px 0 6px 0;text-align:left}
.section-text{color:var(--muted);font-size:13px;margin:0 0 10px 0;text-align:left}
.applies{color:var(--red);font-weight:800}
.mini{font-weight:800;margin:8px 0 4px 0;text-align:left}

/* Style server-specific benefit items to match shared features visually */
.module-server-content{margin-top:12px}
.module-server-content .module-feature{margin-bottom:0}


.module-logo{max-height:54px;width:auto;display:block}
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;border:0;padding:0;margin:-1px}

/* Emphasize certain vertical bars for sections */
.module-zgrad{border-left:6px solid rgba(255,255,255,0.02) /* neutral subtle divider */}
.module-sandbox{border-left:6px solid rgba(16,185,129,0.18) /* green subtle divider */}

/* Responsive: stack server blocks on small screens */
@media (max-width:720px){
  .product-module{padding:18px}
  .module-title{font-size:34px}
  .module-server-sections{flex-direction:column}
  .module-features{padding-left:0}
  .module-header{padding-left:0}
  .module-feature{flex-direction:row}
}