/* EG Design System (OCS) — namespaced utilities only. Does NOT override theme/GB global styles (.gbp-*). */
:root{ --eg-ink:#13313a; --eg-ink-soft:#41585f; --eg-teal:#0a7d8c; --eg-teal-d:#085f6b; --eg-line:#e3e7ea; --eg-tint:#e9f5f6; }
/* container helpers */
.eg-fullwidth{width:100%}
.eg-inner{max-width:1180px;margin-left:auto;margin-right:auto;padding-left:22px;padding-right:22px}
/* contrast utilities (opt-in: only apply where these classes are added) */
.has-dark-bg{color:#fff}
.has-dark-bg h1,.has-dark-bg h2,.has-dark-bg h3,.has-dark-bg h4,.has-dark-bg h5,.has-dark-bg p,.has-dark-bg li,.has-dark-bg span,.has-dark-bg strong{color:#fff}
.has-dark-bg a:not(.eg-btn){color:#fff;text-decoration:underline;text-underline-offset:3px}
.has-dark-bg a:not(.eg-btn):hover{opacity:.82}
.has-light-bg{color:var(--eg-ink)}
.has-light-bg h1,.has-light-bg h2,.has-light-bg h3,.has-light-bg h4,.has-light-bg h5{color:var(--eg-ink)}
.has-light-bg p,.has-light-bg li{color:var(--eg-ink-soft)}
.has-light-bg a:not(.eg-btn){color:var(--eg-teal)}
.has-light-bg a:not(.eg-btn):hover{color:var(--eg-teal-d)}
/* namespaced button */
.eg-btn{display:inline-flex;align-items:center;gap:.5em;background:var(--eg-teal);color:#fff;border:0;border-radius:999px;padding:.72em 1.6em;font-weight:700;text-decoration:none;cursor:pointer;transition:background .15s,transform .1s;line-height:1.2}
.eg-btn:hover{background:var(--eg-teal-d);color:#fff;transform:translateY(-1px)}
.eg-btn--ghost{background:transparent;border:1.5px solid currentColor}
.has-dark-bg .eg-btn--ghost{color:#fff}
/* namespaced cards */
.eg-card{background:#fff;border:1px solid var(--eg-line);border-radius:16px;padding:24px;box-shadow:0 4px 16px rgba(0,40,50,.05);transition:transform .15s,box-shadow .15s;height:100%}
.eg-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,40,50,.1)}
.eg-card h3{color:var(--eg-ink);font-weight:700;margin:0 0 8px;font-size:1.15rem}
.eg-card p{color:var(--eg-ink-soft);line-height:1.55;margin:0}
/* grids */
.eg-grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.eg-grid--2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.eg-grid--4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
/* hero */
.eg-hero{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:48vh;padding:72px 22px;background-size:cover;background-position:center;color:#fff;overflow:hidden}
.eg-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,40,50,.30) 0%,rgba(0,40,50,.62) 100%);z-index:0}
.eg-hero>*{position:relative;z-index:1}
.eg-hero h1{color:#fff;font-size:clamp(2rem,5vw,3.4rem);line-height:1.1;margin:0 0 14px;text-shadow:0 2px 18px rgba(0,0,0,.32)}
.eg-hero p{color:#eef6f7;font-size:clamp(1rem,2.4vw,1.25rem);max-width:700px;margin:0 auto;text-shadow:0 1px 10px rgba(0,0,0,.3)}
.eg-hero .eg-btn{margin-top:22px}
@media (max-width:600px){.eg-hero{min-height:40vh;padding:54px 18px}}
/* inline + feature icons (emoji replacements) */
.eg-ico{display:inline-flex;align-items:center;justify-content:center;vertical-align:-0.15em;width:1.15em;height:1.15em;color:var(--eg-teal)}
.eg-ico svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.has-dark-bg .eg-ico{color:#9fe3ec}
.eg-feature-ico{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:14px;background:var(--eg-tint);color:var(--eg-teal);margin-bottom:12px;flex:0 0 auto}
.eg-feature-ico svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.eg-iconrow{display:flex;align-items:flex-start;gap:12px}
.eg-iconrow .eg-ico{margin-top:.2em}
.eg-vendor-greeting{margin:0 0 16px;line-height:1.2}