/*
 * SGC House Style — shared design system for new content pages
 * (tool pages, hub pages, service/landing pages, case studies).
 * Palette: light hero #F7FAF9, teal accent #008374 / #0b5e4d / #085041,
 * amber CTA #f39c12, near-black headings #172a28, muted body #6b7472.
 * Add new reusable component classes here instead of inline <style>
 * blocks inside individual .tpl files, so pages share one stylesheet.
 */

/* ---------- Hero ---------- */
.sgc-hero{background:#F7FAF9;border-bottom:1px solid #E1E9E7;padding:3.2rem 0 2.8rem}
.sgc-crumb{font-size:13px;color:#6b7472;margin-bottom:1.1rem}
.sgc-crumb a{color:#6b7472;text-decoration:none}
.sgc-crumb a:hover{color:#008374}
.sgc-eyebrow{display:inline-flex;align-self:flex-start;align-items:center;gap:.5rem;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#0b5e4d;background:#dcefea;padding:.4rem .9rem;border-radius:100px;margin-bottom:1.1rem;width:fit-content}
.sgc-eyebrow:before{content:"";width:6px;height:6px;border-radius:50%;background:#008374}
.sgc-hero h1{font-weight:800;letter-spacing:-.02em;color:#172a28;line-height:1.1}
.sgc-hero h1 strong{color:#0b5e4d}
.sgc-hero .lead{color:#6b7472;font-size:1.1rem;max-width:640px}
.sgc-hero-ctas{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:1.6rem}

/* ---------- Buttons ---------- */
.sgc-btn-primary{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:15px;padding:.8rem 1.6rem;border-radius:10px;background:#f39c12;color:#241a04;text-decoration:none;box-shadow:0 10px 22px rgba(243,156,18,.25);transition:transform .15s,box-shadow .15s}
.sgc-btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(243,156,18,.32);color:#241a04}
.sgc-btn-ghost{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:15px;padding:.8rem 1.6rem;border-radius:10px;border:1px solid #E1E9E7;color:#172a28;text-decoration:none;transition:border-color .15s,color .15s}
.sgc-btn-ghost:hover{border-color:#008374;color:#0b5e4d}

/* ---------- Stat row ---------- */
.sgc-stats{display:flex;gap:2.2rem;flex-wrap:wrap;margin-top:2.2rem}
.sgc-stat b{display:block;font-size:1.6rem;font-weight:800;color:#172a28}
.sgc-stat span{font-size:13px;color:#6b7472}

/* ---------- Section header ---------- */
.sgc-section{padding:4rem 0}
.sgc-section-head{max-width:640px;margin:0 auto 2.5rem;text-align:center}
.sgc-kicker{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#0b5e4d;margin-bottom:.6rem}
.sgc-section-head h2{font-weight:800;color:#172a28}
.sgc-section-head p{color:#6b7472;font-size:15.5px;margin:0}

/* ---------- Cards ---------- */
.sgc-card{background:#fff;border:1px solid #E1E9E7;border-radius:16px;overflow:hidden;height:100%;display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s}
.sgc-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(11,94,77,.14)}
.sgc-card-top{height:4px;background:linear-gradient(90deg,#008374,#0b5e4d)}
.sgc-card-body{padding:1.6rem 1.5rem 1.5rem;display:flex;flex-direction:column;flex:1}
.sgc-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.6rem;margin-bottom:1rem}
.sgc-icon-chip{width:50px;height:50px;border-radius:13px;background:#dcefea;color:#0b5e4d;display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0}
.sgc-badge{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:.3rem .6rem;border-radius:100px;white-space:nowrap}
.sgc-badge-core{background:#dcefea;color:#0b5e4d}
.sgc-badge-new{background:#fdecd2;color:#8a5a08}
.sgc-card h3{font-size:1.15rem;font-weight:800;margin-bottom:.5rem;color:#172a28;letter-spacing:-.01em}
.sgc-card p{font-size:14px;line-height:1.6;color:#6b7472;margin-bottom:1.2rem;flex:1}
.sgc-chiplist{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.1rem}
.sgc-chip{font-size:12px;padding:.3rem .6rem;border-radius:8px;background:#F7FAF9;border:1px solid #E1E9E7;color:#172a28;text-decoration:none}
.sgc-chip:hover{border-color:#008374;color:#0b5e4d}
.sgc-card-link{display:inline-flex;align-items:center;gap:.4rem;font-size:13.5px;font-weight:700;color:#0b5e4d;text-decoration:none;margin-top:auto}
.sgc-card:hover .sgc-card-link i{transform:translateX(3px)}
.sgc-card-link i{transition:transform .15s}

/* ---------- Dark teal callout band (e.g. reseller, partner promos) ---------- */
.sgc-band{background:#085041;border-radius:20px;padding:3rem;color:#fff}
.sgc-band h2{font-size:1.6rem;font-weight:800;margin-bottom:.8rem}
.sgc-band p{color:#cfe7e1;font-size:14.5px;line-height:1.65;margin-bottom:1.4rem}
.sgc-band-item{display:flex;gap:.8rem;align-items:flex-start;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:.9rem 1rem;margin-bottom:.9rem}
.sgc-band-item .ic{width:34px;height:34px;border-radius:9px;background:#f39c12;color:#241a04;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1rem}
.sgc-band-item b{display:block;font-size:14px;margin-bottom:.1rem}
.sgc-band-item span{font-size:12.5px;color:#cfe7e1}

/* ---------- FAQ (teal card headers, not purple) ---------- */
.sgc-faq{max-width:820px;margin:0 auto}
.sgc-faq .card{border:1px solid #E1E9E7;border-radius:12px;margin-bottom:.75rem;overflow:hidden}
.sgc-faq .card-header{background:#dcefea!important;color:#085041!important;font-weight:700;border:none;font-size:15px}

/* ---------- Tool pages (tools.tpl hub + all individual tool pages) ---------- */
/* Real class names used across all 8 tool page templates, centralized here. */
.tool-hero{background:#F7FAF9;border-bottom:1px solid #E1E9E7;padding-bottom:2.6rem}
.tool-hero h1{font-weight:800;letter-spacing:-.5px;color:#172a28}
.tool-hero .lead{color:#6b7472!important}
.tool-eyebrow{display:inline-flex;align-self:flex-start;align-items:center;gap:.5rem;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#0b5e4d;background:#dcefea;padding:.35rem .8rem;border-radius:100px;margin-bottom:1rem;width:fit-content}
.tool-eyebrow:before{content:"";width:6px;height:6px;border-radius:50%;background:#008374}
.tool-breadcrumb{font-size:13px;color:#6b7472;margin-bottom:1.2rem}
.tool-breadcrumb a{color:#6b7472;text-decoration:none}
.tool-breadcrumb a:hover{color:#008374}
.tool-card{background:#fff;border:1px solid #E1E9E7;border-radius:14px;padding:1.75rem}
.tool-field label{font-size:13px;font-weight:700;color:#172a28;display:block;margin-bottom:.4rem}
.tool-btn{background:#008374;color:#fff;border:none;padding:.7rem 1.4rem;border-radius:8px;font-weight:700;font-size:14px;cursor:pointer}
.tool-btn:hover{background:#0b5e4d}
.tool-btn-outline{background:#fff;color:#0b5e4d;border:1px solid #0b5e4d;padding:.7rem 1.4rem;border-radius:8px;font-weight:700;font-size:14px;cursor:pointer}
.tool-btn-outline:hover{background:#f2f9f9}
.tool-meta-row{display:flex;justify-content:space-between;font-size:12.5px;color:#6b7472;margin-top:.4rem}
.tool-results{margin-top:1.5rem}
.tool-check{display:flex;gap:.75rem;padding:.85rem 0;border-bottom:1px solid #eef0f5}
.tool-check:last-child{border-bottom:none}
.tool-check .ic{flex:0 0 auto;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;color:#fff;margin-top:.1rem}
.ic-pass{background:#0f9b76}
.ic-warn{background:#e08e0b}
.ic-fail{background:#c0392b}
.tool-check .title{font-weight:700;color:#172a28;font-size:14px}
.tool-check .desc{font-size:13px;color:#6b7472;margin-top:.15rem}
.tool-disclaimer{font-size:12.5px;color:#6b7472;background:#fdf3e0;border-left:3px solid #f39c12;border-radius:0 8px 8px 0;padding:.8rem 1rem;margin-top:1.2rem}
.tool-faq .card{border:1px solid #eef0f5;border-radius:10px!important;overflow:hidden;box-shadow:none;margin-bottom:.75rem}
.tool-faq .card-header{background:#f2f9f9!important;border:0;color:#172a28!important;font-weight:700;padding:.9rem 1.1rem}
.tool-faq .card-header i{color:#008374}
.tool-content h2{font-weight:800;margin-top:2.5rem;margin-bottom:1rem;color:#172a28;position:relative;padding-left:.9rem}
.tool-content h2:before{content:"";position:absolute;left:0;top:.15em;bottom:.15em;width:3px;border-radius:2px;background:#008374}
.tool-content h2:first-child{margin-top:0}

/* Tools hub page only (tools.tpl) */
.tool-grid-title{font-size:1.3rem;font-weight:800;color:#172a28}
.tool-card-link{text-decoration:none;display:block;height:100%}
.tool-hub-card{background:#fff;border:1px solid #E1E9E7;border-radius:14px;overflow:hidden;height:100%;transition:transform .15s,box-shadow .15s}
.tool-hub-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,131,116,.14)}
.tool-hub-top{height:5px;background:#008374}
.tool-hub-body{padding:1.5rem}
.tool-hub-ico{width:48px;height:48px;border-radius:12px;background:#dcefea;color:#0b5e4d;display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:1rem}
.tool-hub-body h3{font-size:1.05rem;font-weight:800;color:#172a28;margin-bottom:.5rem}
.tool-hub-body p{font-size:13.5px;color:#6b7472;margin-bottom:1rem}
.tool-hub-cta{font-size:13px;font-weight:700;color:#0b5e4d}

/* ---------- Case studies (case-studies.tpl + case study detail pages) ---------- */
.cs-hero{background:#F7FAF9;border-bottom:1px solid #E1E9E7;padding-bottom:2.6rem}
.cs-hero h1{font-weight:800;letter-spacing:-.5px;color:#172a28}
.cs-hero .lead{color:#6b7472!important}
.cs-hero .cs-meta-row span{color:#6b7472}
.cs-hero .cs-meta-row i{color:#6b7472}
.cs-eyebrow-pill{display:inline-flex;align-self:flex-start;align-items:center;gap:.5rem;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#0b5e4d;background:#dcefea;padding:.35rem .8rem;border-radius:100px;margin-bottom:1rem;width:fit-content}
.cs-eyebrow-pill:before{content:"";width:6px;height:6px;border-radius:50%;background:#008374}
.cs-hero-breadcrumb{font-size:13px;color:#6b7472;margin-bottom:1.2rem}
.cs-hero-breadcrumb a{color:#6b7472;text-decoration:none}
.cs-hero-breadcrumb a:hover{color:#008374}
.cs-hero-card{background:#fff;border:1px solid #E1E9E7;border-radius:14px;padding:1.5rem;color:#222}
.cs-hero-card .cs-eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#008374}
.cs-hero-card blockquote{font-size:1.05rem;line-height:1.55;margin:.7rem 0 1rem;font-style:italic;border:0;padding:0}
.cs-hero-card footer{font-size:.85rem;color:#6b7472}
.cs-stat-row{display:flex;gap:2rem;flex-wrap:wrap}
.cs-stat-row .cs-n{font-size:1.5rem;font-weight:800;line-height:1;color:#172a28;font-variant-numeric:tabular-nums}
.cs-stat-row .cs-l{font-size:.75rem;color:#6b7472;margin-top:.2rem}
.cs-card{transition:all .3s ease;height:100%;border-radius:14px;overflow:hidden;border:1px solid #eef0f5}
.cs-card:hover{transform:translateY(-6px);box-shadow:0 14px 34px rgba(0,131,116,.14)!important}
.cs-card-top{height:5px;background:#008374}
.cs-card .card-body{padding:1.5rem}
.cs-grid-title{font-size:1.3rem;font-weight:800;color:#172a28}
.cs-badge-teal{background:#dcefea!important;color:#0b5e4d!important}
.cs-card-meta{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:#6b7472;border-top:1px solid #eef0f5;padding-top:.9rem;margin-top:.5rem}
.cs-card-meta a{color:#0b5e4d}
.cs-tag{font-size:.72rem;letter-spacing:.05em;font-weight:700}
.cs-result{background:#f2f9f9;border:1px solid #dcefea;border-radius:14px}
.cs-result .cs-metric{font-size:2.1rem;line-height:1;font-weight:800;color:#0b5e4d;font-variant-numeric:tabular-nums}
.cs-quote{border-left:4px solid #f39c12;background:#fdf3e0;border-radius:0 14px 14px 0;font-size:1.12rem}
.cs-content{font-size:1.05rem;line-height:1.85;color:#3f4451}
.cs-content h2{font-weight:800;margin-top:2.5rem;margin-bottom:1rem;color:#172a28;position:relative;padding-left:.9rem}
.cs-content h2:before{content:"";position:absolute;left:0;top:.15em;bottom:.15em;width:3px;border-radius:2px;background:#008374}
.cs-content h2:first-child{margin-top:0}
.cs-content h3.cs-sub{color:#6b7472;font-weight:600;font-size:1.1rem;margin-bottom:1.1rem}
.cs-content .lead{color:#2b2f38;font-weight:500}
.cs-content>ul{list-style:none;padding-left:0;margin:1.2rem 0}
.cs-content>ul>li{position:relative;padding-left:1.9rem;margin-bottom:.85rem}
.cs-content>ul>li:before{content:"";position:absolute;left:0;top:.6rem;width:10px;height:10px;border-radius:50%;background:#008374}
.cs-feature{background:#fff;border:1px solid #eef0f5;border-radius:14px;height:100%;transition:all .3s ease}
.cs-feature:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,0,0,.08)}
.cs-ico{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:#fff;flex:0 0 auto}
.cs-ico-sms{background:#224abe}
.cs-ico-wa{background:#128c7e}
.cs-ico-purple{background:#0b5e4d}
.cs-ico-amber{background:#e08e0b}
.cs-ico-teal{background:#008374}
.cs-faq .card{border:1px solid #eef0f5;border-radius:10px!important;overflow:hidden;box-shadow:none}
.cs-faq .card-header{background:#f2f9f9!important;border:0;color:#172a28!important}
.cs-faq .card-header i{color:#008374}
.cs-glance li{display:flex;align-items:flex-start;gap:.6rem}
.cs-glance i{color:#008374}
.cs-promo{background:#085041;border-radius:14px;color:#fff}
.cs-promo .list-check{list-style:none;padding-left:0;margin:0}
.cs-promo .list-check li{position:relative;padding-left:1.6rem;margin-bottom:.55rem}
.cs-promo .list-check li:before{content:"\2713";position:absolute;left:0;font-weight:700;color:#f39c12}
.cs-sidebar .list-group-item.active{background:#008374;border-color:#008374}
@media (max-width:767px){.cs-result .cs-metric{font-size:1.6rem}.cs-content h2{margin-top:2rem}}