.es-brand{
  --brand-primary:#00bf00;
  --brand-dark:#0f2f66;
  --brand-muted:#6b7280;
  --panel:#ffffff;
  --panel-alt:#f7fafc;
  --line:#e5e7eb;
  --shadow:0 8px 24px rgba(0,0,0,.06);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:#111827; background:#fff;
  border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow);
  max-width:1100px; margin:0 auto 18px; overflow:hidden;
}
/* Header */
.es-head{
  background: linear-gradient(180deg, #F2F2F2, #E8E8E8);
  border-bottom:1px solid var(--line);
  padding:28px 28px 18px; position:relative;
}
.es-head:after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:4px;
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-dark)); opacity:.18;
}
.es-head h2{ margin:0 0 10px; font-size:1.25rem; line-height:1.5; color:#0b1220; }
.es-head p{ margin:0; line-height:1.65; color:#1f2937; }

/* Grid */
.es-grid{ display:grid; grid-template-columns:1fr; }
@media (min-width:960px){ .es-grid{ grid-template-columns:1.35fr .95fr; } }
.es-col-left{ padding:24px; }

/* Pills */
.pillbar{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 18px 0; }
.pill{
  display:inline-flex; align-items:center; gap:8px; background:#fff;
  border:1px solid var(--line); border-left:4px solid var(--brand-primary);
  border-radius:999px; padding:8px 12px; font-size:.85rem; color:#0f172a;
  box-shadow:0 2px 6px rgba(0,0,0,.04);
}
.pill .dot{ width:8px; height:8px; border-radius:50%; background:var(--brand-primary); }

/* Features */
.feature-grid{ display:grid; grid-template-columns:1fr; gap:14px; margin:0 0 20px 0; padding:0; list-style:none; }
@media (min-width:720px){ .feature-grid{ grid-template-columns:1fr 1fr; } }
.feature{
  background: var(--panel);
  border:1px solid var(--line);
  border-top:3px solid var(--brand-primary);
  border-radius:12px; padding:14px;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.feature strong{ color:#0b1220; display:block; margin-bottom:4px; }

/* Notes */
.notes{
  background: var(--panel-alt);
  border:1px dashed #d1d5db;
  border-radius:12px; padding:14px 16px; margin-top:20px;
}
.notes h3{ margin:0 0 8px; font-size:1rem; color:#0b1220; }
.notes ul{ margin:8px 0 0 18px; padding:0; color:#111827; }

/* Video */
.video-block{
  margin-top:24px; border:1px solid var(--line); border-radius:12px; overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
  background: linear-gradient(180deg, #F2F2F2, #E8E8E8);
}
.video-block h3{
  margin:0; padding:12px 16px;
  background: linear-gradient(90deg, rgba(31,74,160,.08), rgba(15,47,102,.05));
  border-bottom:1px solid var(--line); font-size:1rem; color:var(--brand-dark); font-weight:600;
}
.video-wrapper{ position:relative; padding-bottom:56.25%; height:0; }
.video-wrapper iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* Specs */
.es-col-right{ background:#f2f2f2; border-left:1px solid var(--line); padding:24px; }
.spec-card{ background: var(--panel); border:1px solid var(--line); border-radius:14px; box-shadow:0 2px 10px rgba(0,0,0,.04); overflow:hidden; }
.spec-head{
  background: linear-gradient(180deg, #F2F2F2, #E8E8E8);
  border-bottom:1px solid var(--line); padding:12px 16px; font-weight:600; color:var(--brand-dark);
}
table.specs{ width:100%; border-collapse:collapse; }
.specs th,.specs td{ padding:12px 14px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.specs th{ width:44%; color:var(--brand-muted); font-weight:600; }
.specs tr:last-child th,.specs tr:last-child td{ border-bottom:none; }

/* Bottom CTA */
.es-cta{
  border-top:1px solid var(--line);
  background: #ffffff;
  padding:20px 24px;
}
.es-cta h3{ margin:0 0 10px; font-size:1.05rem; color:#0b1220; }
.es-cta p{ margin:0 0 14px; color:#374151; }
.cta-buttons{ display:flex; flex-wrap:wrap; gap:10px; }
.cta-buttons .btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px;
  border:1px solid rgba(0,0,0,.06); border-radius:999px;
  text-decoration:none; font-weight:700;
  box-shadow:0 4px 14px rgba(0,0,0,.08);
  transition: transform .06s ease, box-shadow .2s ease, opacity .2s ease;
  color:#fff;
}
.btn-green{ background: var(--brand-primary); color:#0b1220; }
.btn-blue{ background: var(--brand-dark); }
.btn-gray{ background: #4b5563; }
.cta-buttons .btn:hover{
  transform: translateY(-1px);
  box-shadow:0 6px 18px rgba(0,0,0,.12);
  opacity:.96;
}
@media (max-width:640px){
  .cta-buttons{ flex-direction:column; }
  .cta-buttons .btn{ width:100%; text-align:center; }
}