/* Design levels (html[data-look], set by the Vision2 demo banner). portal.css is the Professional level.
   Signature: product-grade B2B portal, Space Grotesk and IBM Plex Sans, a gradient hero and elevated panels.
   Essentials: a plain portal finish with the same roles, orders, invoices and support. */
/* ---------- Signature ---------- */
html[data-look="signature"]{--navy:#0f2433;--navy-2:#0a1a26;--teal:#1f8a7a;--teal-bg:#dcf2ee;--bg:#f3f5f7;--font:"IBM Plex Sans",system-ui,sans-serif;--r:14px;--shadow:0 1px 2px rgba(15,36,51,.06),0 12px 32px rgba(15,36,51,.08)}
html[data-look="signature"] h1,html[data-look="signature"] h2,html[data-look="signature"] h3{font-family:"Space Grotesk",system-ui,sans-serif;letter-spacing:-.02em}
html[data-look="signature"] h1{font-size:clamp(34px,5vw,62px);line-height:1.02}
html[data-look="signature"] .hero{background:radial-gradient(90% 120% at 90% 0%,#1f8a7a33 0%,transparent 55%),linear-gradient(135deg,#0f2433,#0a1a26);padding:clamp(56px,9vw,120px) 0}
html[data-look="signature"] .hero h1{color:#fff}
html[data-look="signature"] .hero-card{border-radius:20px;box-shadow:0 40px 80px rgba(0,0,0,.35)}
html[data-look="signature"] .btn{border-radius:10px}
html[data-look="signature"] .site-header{background:rgba(255,255,255,.92);backdrop-filter:blur(10px);position:sticky;top:0;z-index:30}
html[data-look="signature"] .feature-grid>*{border-radius:16px;box-shadow:var(--shadow);border-color:transparent;transition:transform .2s ease}
html[data-look="signature"] .feature-grid>*:hover{transform:translateY(-3px)}
html[data-look="signature"] .site-footer{background:#0a1a26}
/* ---------- Essentials ---------- */
html[data-look="essentials"]{--navy:#1f2937;--navy-2:#111827;--teal:#2b5f8a;--teal-bg:#e8eef5;--bg:#f7f8fa;--r:4px;--shadow:none}
html[data-look="essentials"] .hero{background:#f7f8fa;color:var(--ink)}
html[data-look="essentials"] .hero h1{color:var(--navy)}
html[data-look="essentials"] .hero .btn-ghost,html[data-look="essentials"] .hero .btn-outline{color:var(--navy);border-color:var(--navy)}
html[data-look="essentials"] .hero-card{box-shadow:none;border:1px solid var(--line)}
html[data-look="essentials"] .hero .lede{color:var(--muted)}html[data-look="essentials"] .hero .eyebrow{color:var(--teal)}html[data-look="essentials"] .hero .btn-light{background:var(--navy);color:#fff}