/* ===== Shared standalone-module shell =====
   Exact recipes pulled from pha.rentspire.com's own CSS (portal.css / pha-shared.css):
   gv8-top sticky nav, gv11-band dark header, gv11-matrix light body/related bands.
   Applied across all 15 self-serve demo modules so each reads as its own standalone product. */

:root{
  --pha-blue:#1a56a4; --pha-blue-deep:#163c73; --pha-canvas:#eceff4;
  --pha-on-dark:#ffffff; --pha-on-dark-accent:#a9caff; --pha-on-dark-body:#dce8f7; --pha-on-dark-muted:#c2d4ea;
  --accent:#1a56a4; --accent-bg:#d3e2f7;
}

/* ===== gv8-top: sticky nav bar ===== */
.gv8-top{display:flex;align-items:center;justify-content:space-between;gap:14px;height:56px;padding:0 22px;
  background:#0e2440;border-bottom:3px solid #1a56a4;position:sticky;top:0;z-index:20}
.gv8-brand{display:flex;align-items:center;gap:11px;color:#fff;text-decoration:none}
.gv8-brand svg{width:26px;height:26px;color:#9cc2f2;flex:0 0 auto}
.gv8-brand b{display:block;font-size:16px;font-weight:800;letter-spacing:-.01em;color:#fff;font-family:Inter,system-ui,sans-serif}
.gv8-brand span{display:block;font:800 11px/1.25 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#9cc2f2}
.gv8-nav{display:flex;gap:20px;font-size:13px}
.gv8-nav a{color:#c6d4e8;text-decoration:none}
.gv8-nav a:hover{color:#fff}

/* ===== gv11-band: dark navy header ===== */
.module-header{position:relative;overflow:hidden;
  background:linear-gradient(180deg, #0d2340 0%, var(--pha-blue-deep) 100%);
  padding:32px 32px 28px;
}
.module-header::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:48px 48px;
}
.module-header-inner{position:relative;z-index:1;display:flex;justify-content:space-between;gap:24px;align-items:flex-end;flex-wrap:wrap;max-width:1180px;margin:0 auto}
.crumb2{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--pha-on-dark-muted);margin-bottom:14px;display:flex;align-items:center;gap:6px}
.crumb2 a{color:var(--pha-on-dark-muted);text-decoration:none}
.crumb2 a:hover{color:#fff}
.badge-row{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.icon-wrap{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.icon-wrap svg{width:24px;height:24px;color:var(--pha-on-dark-accent)}
.badge{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:20px}
.badge-fam{background:rgba(255,255,255,.1);color:var(--pha-on-dark-accent);border:1px solid rgba(255,255,255,.2)}
.badge-live{background:rgba(57,217,138,.15);color:#39d98a}
.badge-limited{background:rgba(255,196,84,.15);color:#ffc454}
.badge-roadmap{background:rgba(148,163,184,.15);color:#94a3b8}
.module-header h1{font-size:32px;font-weight:800;margin:0 0 10px;color:#fff;letter-spacing:-0.01em;line-height:1.15;font-family:Inter,system-ui,sans-serif}
.module-header .dek{font-size:15.5px;color:var(--pha-on-dark-body);max-width:600px;line-height:1.55;margin:0;font-family:Inter,system-ui,sans-serif}
.stat-strip{display:flex;gap:26px;flex:0 0 auto;flex-wrap:wrap}
.stat{text-align:right;border-left:2px solid rgba(169,202,255,.35);padding-left:16px}
.stat b{display:block;font-family:'IBM Plex Mono',monospace;font-size:26px;font-weight:800;color:var(--pha-on-dark);letter-spacing:-.02em}
.stat span{font-size:11px;color:var(--pha-on-dark-muted);text-transform:uppercase;letter-spacing:.06em}

/* ===== Toolbar ===== */
.toolbar{background:#fff;border-bottom:1px solid #e5e9ee;padding:12px 32px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.toolbar-left{display:flex;gap:20px;font-size:13px}
.toolbar-left a{color:#6b7684;text-decoration:none;padding-bottom:12px;display:inline-block;cursor:pointer}
.toolbar-left a.active{color:#0f1720;font-weight:700;border-bottom:2px solid var(--accent);margin-bottom:-13px}
.btn{padding:9px 14px;border-radius:8px;font-weight:700;font-size:13px;background:var(--pha-blue);color:#fff;text-decoration:none;border:none;cursor:pointer;display:inline-block}
.btn:hover{background:var(--pha-blue-deep)}

/* ===== Body: light band ===== */
.body{position:relative;padding:28px 32px;overflow:hidden;
  background:linear-gradient(180deg, #f4f6fa 0%, #e9edf3 100%);
}
.body::before, .related::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(18,49,87,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18,49,87,.09) 1px, transparent 1px);
  background-size:48px 48px;
}
.panel{position:relative;z-index:1;max-width:1180px;margin:0 auto}

/* ===== Related-module cards, same light band recipe ===== */
.related{position:relative;padding:8px 32px 44px;overflow:hidden;
  background:linear-gradient(180deg, #e9edf3 0%, #f4f6fa 100%);
}
.related h3, .related-grid{position:relative;z-index:1;max-width:1180px;margin:0 auto}
.related h3{font-size:12px;font-family:'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.08em;color:#6b7684;margin:0 auto 14px}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rcard{background:#fff;border:1px solid #dbe1e9;border-radius:12px;padding:16px;font-size:13px;text-decoration:none;color:inherit;display:flex;gap:12px;align-items:flex-start;transition:border-color .15s;box-shadow:0 1px 2px rgba(10,20,40,.04)}
.rcard:hover{border-color:var(--accent)}
.rcard .ricon{flex:0 0 auto;width:32px;height:32px;border-radius:9px;background:var(--accent-bg);display:flex;align-items:center;justify-content:center}
.rcard .ricon svg{width:17px;height:17px;color:var(--accent)}
.rcard b{display:block;font-size:14px;margin-bottom:3px;color:#0f1720}
.rcard span{color:#6b7684;line-height:1.4}

@media (max-width: 720px){
  .module-header-inner{flex-direction:column;align-items:flex-start}
  .stat-strip{flex-wrap:wrap;gap:16px}
  .related-grid{grid-template-columns:1fr}
  .gv8-nav{display:none}
}