/* ==========================================================================
   eWebGuru.in — shared site stylesheet (ewg.css)
   Navy glassmorphism / electric-cyan theme.

   SCOPE: every rule below lives under the .ewg wrapper (the <main> element),
   so header.php and footer.php keep their original Bootstrap / style.css
   look. Load this AFTER bootstrap.css and style.css.

   Reuse on inner pages: wrap page content in <main class="ewg"> and use the
   same component classes (.ewg-section, .ewg-card, .ewg-btn, etc.).
   ========================================================================== */

/* Bootstrap 3 sets html{font-size:10px}; footer.php uses rem sized for 16px. */
html { font-size: 16px !important; scroll-behavior: smooth; }

.ewg {
  /* ---- Design tokens ---- */
  --navy-950: #050D19;
  --navy-900: #07111F;
  --navy-800: #0B1A2E;
  --navy-700: #10233D;
  --navy-600: #173052;
  --glass: rgba(255, 255, 255, 0.045);
  --glass-strong: rgba(255, 255, 255, 0.075);
  --glass-border: rgba(148, 197, 255, 0.14);
  --glass-border-hi: rgba(34, 211, 238, 0.45);
  --cyan: #22D3EE;
  --cyan-2: #38BDF8;
  --cyan-glow: rgba(34, 211, 238, 0.28);
  --amber: #F5A524;          /* warm accent — CTAs only */
  --amber-2: #FFBE4D;
  --text: #E8F0FA;
  --text-2: #B3C2D6;
  --muted: #9AACC4;
  --ok: #4ADE80;
  --font-head: 'Sora', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  display: block;
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
  /* clip-path keeps the fixed shine layer (::after) inside <main>,
     so it never paints over header.php or footer.php */
  clip-path: inset(0);
  /* Deep blue → ocean blue → cyan-lit base gradient */
  background-color: #0A2554;
  background-image:
    radial-gradient(1200px 900px at 85% 6%, rgba(34, 211, 238, 0.16), transparent 60%),
    radial-gradient(1000px 800px at 8% 38%, rgba(56, 189, 248, 0.12), transparent 62%),
    radial-gradient(1100px 900px at 92% 68%, rgba(34, 211, 238, 0.11), transparent 62%),
    radial-gradient(900px 700px at 15% 94%, rgba(56, 189, 248, 0.12), transparent 62%),
    linear-gradient(165deg, #071A3C 0%, #0B2C63 22%, #0D3D80 45%, #0B336E 65%, #0C3A78 82%, #08214A 100%);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* Scoped reset — wrapped in :where() so it has near-zero specificity and
   any component class below overrides it, while still beating Bootstrap
   element defaults through source order. */
:where(.ewg) *, :where(.ewg) *::before, :where(.ewg) *::after { box-sizing: border-box; }
:where(.ewg) :where(h1, h2, h3, h4, p, ul, ol, li, figure, blockquote, dl, dd) { margin: 0; padding: 0; }
:where(.ewg) :where(ul, ol) { list-style: none; }
:where(.ewg) img { max-width: 100%; display: block; }
:where(.ewg) :where(img, video) { height: auto; }
:where(.ewg) a, :where(.ewg) a:hover, :where(.ewg) a:focus { color: inherit; text-decoration: none; }
:where(.ewg) :where(h1, h2, h3, h4) {
  font-family: var(--font-head);
  color: var(--text);
  line-height: 1.2;
  font-weight: 700;
}
.ewg strong { color: var(--text); font-weight: 600; }
.ewg :focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }

/* Visually hidden (screen readers only) */
.ewg .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Background texture: faint grid + glows across the whole main */
.ewg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(148, 197, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 197, 255, 0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(180deg, black 0%, rgba(0,0,0,0.35) 30%, rgba(0,0,0,0.25) 70%, black 100%);
  -webkit-mask-image: linear-gradient(180deg, black 0%, rgba(0,0,0,0.35) 30%, rgba(0,0,0,0.25) 70%, black 100%);
}

/* Shine layer: fixed to the viewport, moved by scroll.
   ewg.js sets --ewg-a / --ewg-b (0–1, drift the light pools) and
   --ewg-sheen (px, slides the diagonal light band) as the page scrolls.
   Without JS (or with reduced motion) it shows as static glow. */
.ewg::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  mix-blend-mode: screen;
  background:
    linear-gradient(115deg,
      transparent 0%, transparent 38%,
      rgba(165, 243, 252, 0.06) 45%,
      rgba(224, 250, 255, 0.13) 50%,
      rgba(165, 243, 252, 0.06) 55%,
      transparent 62%, transparent 100%)
      calc(var(--ewg-sheen, 0) * 1px) 0 / 170% 100% repeat-x,
    radial-gradient(560px 440px at calc(10% + var(--ewg-a, 0.5) * 60%) 26%, rgba(34, 211, 238, 0.20), transparent 70%),
    radial-gradient(640px 500px at calc(92% - var(--ewg-b, 0.5) * 55%) 78%, rgba(56, 189, 248, 0.18), transparent 70%),
    radial-gradient(760px 420px at 50% calc(-12% + var(--ewg-a, 0.5) * 22%), rgba(125, 211, 252, 0.14), transparent 70%);
  will-change: background-position;
}

/* ---- Layout ---- */
.ewg-wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.ewg-section { padding: 104px 0; position: relative; }
.ewg-section--tight { padding: 72px 0; }
.ewg-section--alt { background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.025) 18%, rgba(255, 255, 255, 0.025) 82%, transparent); }

.ewg-head { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.ewg-head--left { margin-left: 0; text-align: left; }
.ewg-head h2 {
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 800;
  letter-spacing: -1.2px;
  margin-bottom: 16px;
}
.ewg-head p { font-size: 17px; color: var(--text-2); }

.ewg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cyan);
  padding: 6px 14px;
  border: 1px solid rgba(34, 211, 238, 0.28);
  background: rgba(34, 211, 238, 0.07);
  border-radius: 100px;
  margin-bottom: 20px;
}
.ewg-eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
}

.ewg-grad {
  background: linear-gradient(100deg, var(--cyan) 0%, var(--cyan-2) 35%, #A5F3FC 50%, var(--cyan-2) 65%, var(--cyan) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: ewgSheen 7s linear infinite;
}
@keyframes ewgSheen { from { background-position: 100% 0; } to { background-position: -120% 0; } }

/* ---- Glass card base ---- */
.ewg-card {
  position: relative;
  background: linear-gradient(160deg, var(--glass-strong), var(--glass));
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

/* ---- Buttons ---- */
.ewg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--r-sm);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
  white-space: nowrap;
}
.ewg .ewg-btn--primary {
  background: linear-gradient(135deg, var(--amber), var(--amber-2));
  color: #1A1204;
  box-shadow: 0 8px 28px rgba(245, 165, 36, 0.28);
}
.ewg .ewg-btn--primary:hover { color: #1A1204; transform: translateY(-2px); box-shadow: 0 12px 36px rgba(245, 165, 36, 0.38); }
.ewg .ewg-btn--ghost {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--glass-border);
  color: var(--text);
}
.ewg .ewg-btn--ghost:hover { border-color: var(--glass-border-hi); color: var(--cyan); background: rgba(34, 211, 238, 0.06); }
.ewg-btn svg { flex-shrink: 0; }

/* ==========================================================================
   HERO
   ========================================================================== */
.ewg-hero {
  position: relative;
  padding: 150px 0 96px; /* clears fixed header.php navbar */
  overflow: hidden;
}
.ewg-hero::before {
  /* single soft glow behind the hero */
  content: '';
  position: absolute;
  width: 900px; height: 900px;
  top: -380px; left: 50%;
  transform: translateX(-30%);
  background: radial-gradient(circle, rgba(34, 211, 238, 0.16) 0%, rgba(56, 189, 248, 0.06) 40%, transparent 68%);
  pointer-events: none;
  z-index: -1;
}
.ewg-hero__grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 56px;
  align-items: center;
}
.ewg-hero h1 {
  font-size: clamp(38px, 4.8vw, 62px);
  font-weight: 800;
  letter-spacing: -2px;
  line-height: 1.07;
  margin-bottom: 22px;
}
.ewg-hero__lead {
  font-size: 18px;
  color: var(--text-2);
  max-width: 560px;
  margin-bottom: 30px;
}
.ewg-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 38px; }

.ewg-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  padding-top: 26px;
  border-top: 1px solid var(--glass-border);
}
.ewg-proof li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-2);
}
.ewg-proof li::before {
  content: '';
  width: 16px; height: 16px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(34, 211, 238, 0.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%2322D3EE' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* ---- Hero server picker (glass panel with tabs) ---- */
.ewg-picker { padding: 26px; }
.ewg-picker__title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}
.ewg-picker__dots { display: flex; gap: 6px; }
.ewg-picker__dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(148, 197, 255, 0.25); }
.ewg-picker__dots span:first-child { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }

.ewg-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 5px;
  background: rgba(5, 13, 25, 0.55);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  margin-bottom: 22px;
}
.ewg-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-2);
  font-family: var(--font-head);
  font-size: 13.5px;
  font-weight: 600;
  padding: 10px 6px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.ewg-tab:hover { color: var(--text); }
.ewg-tab[aria-selected="true"] {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.22), rgba(56, 189, 248, 0.12));
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.35);
}
.ewg-panel[hidden] { display: none; }
.ewg-panel h3 { font-size: 21px; margin-bottom: 6px; }
.ewg-panel > p { font-size: 14.5px; color: var(--text-2); margin-bottom: 18px; }
.ewg-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}
.ewg-specs li {
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(5, 13, 25, 0.45);
  border: 1px solid var(--glass-border);
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
}
.ewg-specs li b {
  display: block;
  font-family: var(--font-head);
  font-size: 14.5px;
  color: var(--text);
  font-weight: 600;
  margin-top: 2px;
}
.ewg-panel__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.ewg-price { font-family: var(--font-head); color: var(--text-2); font-size: 14px; }
.ewg-price strong { font-size: 30px; font-weight: 800; letter-spacing: -1px; color: var(--text); }
.ewg-price small { color: var(--muted); font-size: 13px; }

/* ==========================================================================
   TRUST STRIP
   ========================================================================== */
.ewg-trust {
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
  background: rgba(4, 16, 40, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ewg-trust__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.ewg-trust__item {
  padding: 30px 18px;
  text-align: center;
  border-right: 1px solid var(--glass-border);
}
.ewg-trust__item:last-child { border-right: 0; }
.ewg-trust__val {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--text);
  line-height: 1.1;
}
.ewg-trust__lbl { display: block; font-size: 13px; color: var(--muted); margin-top: 6px; }

/* ==========================================================================
   PRODUCTS
   ========================================================================== */
.ewg-products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.ewg-product { padding: 32px 30px 28px; display: flex; flex-direction: column; overflow: hidden; }
.ewg-product::after {
  /* cursor-follow glow (set by ewg.js) */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(34, 211, 238, 0.10), transparent 45%);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
  pointer-events: none;
}
.ewg-product:hover { transform: translateY(-6px); border-color: var(--glass-border-hi); box-shadow: 0 28px 60px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(34, 211, 238, 0.1); }
.ewg-product:hover::after { opacity: 1; }
.ewg-product--featured { border-color: rgba(34, 211, 238, 0.35); background: linear-gradient(160deg, rgba(34, 211, 238, 0.10), var(--glass)); }

.ewg-badge {
  position: absolute;
  top: 22px; right: 22px;
  font-family: var(--font-head);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #04212A;
  background: var(--cyan);
  padding: 4px 10px;
  border-radius: 100px;
}
.ewg-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(34, 211, 238, 0.10);
  border: 1px solid rgba(34, 211, 238, 0.25);
  color: var(--cyan);
  margin-bottom: 22px;
}
.ewg-product h3 { font-size: 21px; margin-bottom: 10px; }
.ewg-product h3 a:hover { color: var(--cyan); }
.ewg-product > p { font-size: 14.5px; color: var(--text-2); margin-bottom: 20px; }
.ewg-product .ewg-price { margin-bottom: 18px; }
.ewg-product .ewg-price strong { font-size: 32px; }

.ewg-checks { margin-bottom: 26px; flex-grow: 1; }
.ewg-checks li {
  position: relative;
  padding: 7px 0 7px 26px;
  font-size: 14px;
  color: var(--text-2);
  border-bottom: 1px solid rgba(148, 197, 255, 0.08);
}
.ewg-checks li:last-child { border-bottom: 0; }
.ewg-checks li::before {
  content: '';
  position: absolute;
  left: 0; top: 11px;
  width: 15px; height: 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.8 2.8 6.2-6.4' fill='none' stroke='%2322D3EE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ewg-product .ewg-btn { width: 100%; justify-content: space-between; }

/* ==========================================================================
   COMPARISON TABLE
   ========================================================================== */
.ewg-table-wrap {
  overflow-x: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--glass-border);
  background: linear-gradient(160deg, var(--glass-strong), var(--glass));
  -webkit-overflow-scrolling: touch;
}
.ewg-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.ewg-table caption { text-align: left; padding: 0; }
.ewg-table th, .ewg-table td {
  padding: 18px 22px;
  text-align: left;
  vertical-align: top;
  font-size: 14.5px;
  border-bottom: 1px solid var(--glass-border);
}
.ewg-table thead th {
  font-family: var(--font-head);
  font-size: 15px;
  color: var(--text);
  background: rgba(5, 13, 25, 0.5);
}
.ewg-table thead th:not(:first-child) { color: var(--cyan); }
.ewg-table tbody th {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--text);
  width: 20%;
}
.ewg-table td { color: var(--text-2); }
.ewg-table tbody tr:last-child th, .ewg-table tbody tr:last-child td { border-bottom: 0; }
.ewg-table tbody tr:hover td, .ewg-table tbody tr:hover th { background: rgba(34, 211, 238, 0.03); }

/* ==========================================================================
   LOCATIONS / NETWORK
   ========================================================================== */
.ewg-split {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 56px;
  align-items: center;
}
.ewg-split p.ewg-body { color: var(--text-2); font-size: 16.5px; margin-bottom: 18px; }
.ewg-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; }
.ewg-fact { padding: 18px 20px; border-radius: var(--r-md); }
.ewg-fact dt { font-size: 12.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 1.2px; font-weight: 600; }
.ewg-fact dd { font-family: var(--font-head); font-size: 17px; color: var(--text); font-weight: 600; margin-top: 4px; }

.ewg-locs { padding: 30px; }
.ewg-locs h3 { font-size: 15px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.ewg-locs ul + h3 { margin-top: 28px; }
.ewg-loc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(5, 13, 25, 0.45);
  border: 1px solid var(--glass-border);
  margin-bottom: 10px;
}
.ewg-loc__name { display: flex; align-items: center; gap: 12px; font-family: var(--font-head); font-weight: 600; color: var(--text); }
.ewg-loc__name::before {
  content: '';
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.15);
  animation: ewgPulse 2.4s ease-in-out infinite;
}
.ewg-loc--intl .ewg-loc__name::before { background: var(--cyan-2); box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.15); }
.ewg-loc__tag { font-size: 12.5px; color: var(--muted); text-align: right; }
@keyframes ewgPulse { 50% { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); } }

/* ==========================================================================
   WHY / FEATURES GRID
   ========================================================================== */
.ewg-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ewg-feature { padding: 28px; border-radius: var(--r-md); }
.ewg-feature:hover { border-color: var(--glass-border-hi); transform: translateY(-4px); }
.ewg-feature .ewg-icon { width: 46px; height: 46px; margin-bottom: 18px; border-radius: 12px; }
.ewg-feature h3 { font-size: 17px; margin-bottom: 8px; }
.ewg-feature p { font-size: 14.5px; color: var(--text-2); }

/* ==========================================================================
   WHO IT'S FOR
   ========================================================================== */
.ewg-audience { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ewg-aud { padding: 30px; border-radius: var(--r-lg); }
.ewg-aud__k { font-family: var(--font-head); font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--cyan); font-weight: 600; margin-bottom: 10px; display: block; }
.ewg-aud h3 { font-size: 19px; margin-bottom: 10px; }
.ewg-aud p { font-size: 14.5px; color: var(--text-2); margin-bottom: 14px; }
.ewg-aud a { font-family: var(--font-head); font-size: 14px; font-weight: 600; color: var(--cyan); }
.ewg-aud a:hover { color: var(--cyan-2); }

/* ==========================================================================
   STEPS
   ========================================================================== */
.ewg-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: step; }
.ewg-step { padding: 30px; border-radius: var(--r-lg); counter-increment: step; }
.ewg-step::before {
  content: '0' counter(step);
  display: block;
  font-family: var(--font-head);
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -2px;
  line-height: 1;
  margin-bottom: 18px;
  background: linear-gradient(135deg, var(--cyan), rgba(34, 211, 238, 0.2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ewg-step h3 { font-size: 18px; margin-bottom: 8px; }
.ewg-step p { font-size: 14.5px; color: var(--text-2); }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.ewg-quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.ewg-quote { padding: 36px; display: flex; flex-direction: column; }
.ewg-quote__stars { color: var(--amber); letter-spacing: 3px; font-size: 15px; margin-bottom: 16px; }
.ewg-quote blockquote p { font-size: 16px; color: var(--text-2); line-height: 1.75; margin-bottom: 26px; }
.ewg-quote figcaption { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.ewg-quote__avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--glass-border-hi);
  background: linear-gradient(135deg, var(--navy-600), var(--cyan));
  flex-shrink: 0;
}
.ewg-quote__name { font-family: var(--font-head); font-weight: 700; color: var(--text); font-size: 15px; display: block; }
.ewg-quote__role { font-size: 13px; color: var(--muted); display: block; }
.ewg-quote__years {
  margin-left: auto;
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 700;
  color: var(--cyan);
  padding: 5px 11px;
  border: 1px solid rgba(34, 211, 238, 0.3);
  border-radius: 100px;
  white-space: nowrap;
}

/* ==========================================================================
   FAQ (native <details>, no JS needed)
   ========================================================================== */
.ewg-faq { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px; align-items: start; }
.ewg-faq__aside { position: sticky; top: 120px; }
.ewg-contact { padding: 26px; margin-top: 28px; border-radius: var(--r-md); }
.ewg-contact p { color: var(--text-2); font-size: 14.5px; margin-bottom: 14px; }
.ewg-contact a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15.5px;
  color: var(--cyan);
  padding: 6px 0;
}
.ewg-contact a:hover { color: var(--cyan-2); }

.ewg-qa { border-bottom: 1px solid var(--glass-border); }
.ewg-qa summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  cursor: pointer;
}
.ewg-qa summary::-webkit-details-marker { display: none; }
.ewg-qa summary h3 { font-size: 16.5px; font-weight: 600; transition: color 0.25s var(--ease); }
.ewg-qa summary:hover h3 { color: var(--cyan); }
.ewg-qa summary::after {
  content: '+';
  flex-shrink: 0;
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  color: var(--text-2);
  font-size: 18px;
  line-height: 1;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.ewg-qa[open] summary::after { transform: rotate(45deg); background: var(--cyan); border-color: var(--cyan); color: #04212A; }
.ewg-qa__a { padding: 0 44px 22px 0; }
.ewg-qa__a p { font-size: 15px; color: var(--text-2); }
.ewg-qa__a p + p { margin-top: 10px; }
.ewg-qa__a a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   CTA STRIP
   ========================================================================== */
.ewg-cta {
  padding: 56px 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  flex-wrap: wrap;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.14), rgba(56, 189, 248, 0.05) 50%, rgba(245, 165, 36, 0.08));
  border-color: rgba(34, 211, 238, 0.3);
}
.ewg-cta h2 { font-size: clamp(26px, 3vw, 38px); font-weight: 800; letter-spacing: -1px; margin-bottom: 10px; }
.ewg-cta p { color: var(--text-2); font-size: 16.5px; max-width: 560px; }
.ewg-cta__btns { display: flex; gap: 14px; flex-wrap: wrap; }

/* ==========================================================================
   SCROLL REVEAL (enabled only when ewg.js adds .ewg-js to <html>)
   ========================================================================== */
.ewg-js .ewg-reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.ewg-js .ewg-reveal.is-in { opacity: 1; transform: none; }
.ewg-js .ewg-d1 { transition-delay: 0.08s; }
.ewg-js .ewg-d2 { transition-delay: 0.16s; }
.ewg-js .ewg-d3 { transition-delay: 0.24s; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .ewg-hero__grid, .ewg-split, .ewg-faq { grid-template-columns: 1fr; gap: 44px; }
  .ewg-faq__aside { position: static; }
  .ewg-products, .ewg-features, .ewg-audience { grid-template-columns: 1fr 1fr; }
  .ewg-trust__grid { grid-template-columns: repeat(3, 1fr); }
  .ewg-trust__item:nth-child(3) { border-right: 0; }
  .ewg-trust__item:nth-child(n+4) { border-top: 1px solid var(--glass-border); }
  .ewg-hero__lead { max-width: none; }
}
@media (max-width: 760px) {
  .ewg-section { padding: 68px 0; }
  .ewg-section--tight { padding: 52px 0; }
  .ewg-wrap { padding: 0 16px; }
  .ewg-head { margin-bottom: 38px; }
  .ewg-head h2 { font-size: 27px; letter-spacing: -0.6px; }
  .ewg-head p { font-size: 15.5px; }
  .ewg-hero { padding: 112px 0 64px; }
  .ewg-hero h1 { font-size: clamp(30px, 8.4vw, 40px); letter-spacing: -1px; }
  .ewg-hero__lead { font-size: 16px; }
  .ewg-hero__cta .ewg-btn { flex: 1 1 100%; }
  .ewg-products, .ewg-features, .ewg-audience, .ewg-steps, .ewg-quotes { grid-template-columns: 1fr; }
  .ewg-trust__grid { grid-template-columns: 1fr 1fr; }
  .ewg-trust__item { border-right: 0 !important; border-top: 1px solid var(--glass-border); }
  .ewg-trust__item:nth-child(odd) { border-right: 1px solid var(--glass-border) !important; }
  .ewg-trust__item:nth-child(-n+2) { border-top: 0; }
  .ewg-trust__item:last-child { grid-column: 1 / -1; border-right: 0 !important; }
  .ewg-picker { padding: 18px; }
  .ewg-tab { font-size: 12.5px; padding: 9px 2px; }
  .ewg-specs { grid-template-columns: 1fr 1fr; }
  .ewg-facts { grid-template-columns: 1fr 1fr; }
  .ewg-locs { padding: 20px; }
  .ewg-product, .ewg-quote, .ewg-aud, .ewg-step { padding: 26px 22px; }
  .ewg-quote__years { display: none; }
  .ewg-qa__a { padding-right: 0; }
  .ewg-cta { padding: 34px 22px; text-align: center; justify-content: center; }
  .ewg-cta__btns { width: 100%; flex-direction: column; }
  .ewg-cta__btns .ewg-btn { width: 100%; }
}
@media (max-width: 400px) {
  .ewg-specs, .ewg-facts { grid-template-columns: 1fr; }
}

/* Low-power touch devices: drop the expensive blur */
@media (hover: none) and (pointer: coarse) {
  .ewg-card { backdrop-filter: none; -webkit-backdrop-filter: none; background: linear-gradient(160deg, rgba(23, 48, 82, 0.72), rgba(16, 35, 61, 0.72)); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ewg *, .ewg *::before, .ewg *::after { animation: none !important; transition-duration: 0.001ms !important; }
  .ewg-js .ewg-reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   INNER-PAGE COMPONENTS (product pages: WordPress, VPS, etc.)
   ========================================================================== */

/* ---- Breadcrumb ---- */
.ewg-crumbs { margin-bottom: 22px; }
.ewg-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13.5px; color: var(--muted); }
.ewg-crumbs li { display: flex; align-items: center; gap: 6px; }
.ewg-crumbs li + li::before { content: '/'; opacity: 0.5; }
.ewg-crumbs a:hover { color: var(--cyan); }
.ewg-crumbs [aria-current] { color: var(--text-2); }

/* ---- Hero side card (summary / included list) ---- */
.ewg-summary { padding: 30px; }
.ewg-summary__price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 6px 0 4px; }
.ewg-summary__price strong { font-family: var(--font-head); font-size: 48px; font-weight: 800; letter-spacing: -2px; color: var(--text); line-height: 1; }
.ewg-summary__price span { color: var(--muted); font-size: 14px; }
.ewg-summary__note { font-size: 13px; color: var(--muted); margin-bottom: 20px; }
.ewg-summary .ewg-checks { margin-bottom: 22px; }
.ewg-summary .ewg-btn { width: 100%; }
.ewg-kicker { font-family: var(--font-head); font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); font-weight: 600; }

/* ---- Pricing plans ---- */
.ewg-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ewg-plan { padding: 28px 26px 24px; display: flex; flex-direction: column; overflow: hidden; }
.ewg-plan:hover { transform: translateY(-5px); border-color: var(--glass-border-hi); }
.ewg-plan--featured { border-color: rgba(34, 211, 238, 0.45); background: linear-gradient(160deg, rgba(34, 211, 238, 0.16), rgba(255, 255, 255, 0.04)); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(34, 211, 238, 0.15), 0 0 40px rgba(34, 211, 238, 0.12); }
.ewg-plan__use { font-family: var(--font-head); font-size: 11.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--cyan); font-weight: 600; }
.ewg-plan h3 { font-size: 22px; margin: 6px 0 14px; }
.ewg-plan__price { display: flex; align-items: baseline; gap: 4px; margin-bottom: 2px; }
.ewg-plan__price strong { font-family: var(--font-head); font-size: 40px; font-weight: 800; letter-spacing: -1.5px; color: var(--text); line-height: 1; }
.ewg-plan__price span { color: var(--text-2); font-size: 15px; font-family: var(--font-head); }
.ewg-plan__term { font-size: 12.5px; color: var(--muted); margin-bottom: 18px; }
.ewg-plan__specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px; }
.ewg-plan__specs li { text-align: center; padding: 10px 4px; border-radius: 10px; background: rgba(4, 16, 40, 0.35); border: 1px solid var(--glass-border); font-size: 11.5px; color: var(--muted); line-height: 1.3; }
.ewg-plan__specs b { display: block; font-family: var(--font-head); font-size: 15px; color: var(--text); font-weight: 700; }
.ewg-plan .ewg-checks { margin-bottom: 22px; }
.ewg-plan .ewg-btn { width: 100%; }
.ewg-plans-note { margin-top: 26px; text-align: center; color: var(--text-2); font-size: 15px; }
.ewg-plans-note + .ewg-plans-note { margin-top: 8px; font-size: 14px; color: var(--muted); }

/* ---- Callout ---- */
.ewg-callout { margin-top: 26px; padding: 24px 28px; display: flex; gap: 18px; align-items: flex-start; border-radius: var(--r-md); }
.ewg-callout .ewg-icon { margin: 0; flex-shrink: 0; width: 44px; height: 44px; }
.ewg-callout h3 { font-size: 17px; margin-bottom: 6px; }
.ewg-callout p { color: var(--text-2); font-size: 14.5px; }
.ewg-callout p + p { margin-top: 6px; }
.ewg-callout p a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }

/* ---- Scope (we do / we help / we don't) ---- */
.ewg-scope { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.ewg-scope__card { padding: 28px; border-radius: var(--r-md); }
.ewg-scope__tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; padding: 5px 12px; border-radius: 100px; margin-bottom: 14px; }
.ewg-scope__tag--do   { color: #86EFAC; background: rgba(74, 222, 128, 0.12); border: 1px solid rgba(74, 222, 128, 0.3); }
.ewg-scope__tag--help { color: var(--cyan); background: rgba(34, 211, 238, 0.10); border: 1px solid rgba(34, 211, 238, 0.3); }
.ewg-scope__tag--dont { color: #FCD34D; background: rgba(245, 165, 36, 0.12); border: 1px solid rgba(245, 165, 36, 0.32); }
.ewg-scope__tag--you  { color: #C4B5FD; background: rgba(167, 139, 250, 0.12); border: 1px solid rgba(167, 139, 250, 0.3); }
.ewg-scope__card h3 { font-size: 18px; margin-bottom: 8px; }
.ewg-scope__card p { color: var(--text-2); font-size: 14.5px; }

/* ---- Stat band (inline 4-up) ---- */
.ewg-band { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 40px; border-radius: var(--r-lg); overflow: hidden; }
.ewg-band > div { padding: 24px 18px; text-align: center; border-right: 1px solid var(--glass-border); }
.ewg-band > div:last-child { border-right: 0; }
.ewg-band b { display: block; font-family: var(--font-head); font-size: 28px; font-weight: 800; letter-spacing: -1px; color: var(--text); line-height: 1.1; }
.ewg-band span { font-size: 13px; color: var(--muted); }

/* ---- Stack list (definition style) ---- */
.ewg-stack { display: grid; gap: 12px; }
.ewg-stack li { padding: 18px 20px 18px 62px; position: relative; border-radius: var(--r-md); }
.ewg-stack li::before { content: ''; position: absolute; left: 20px; top: 20px; width: 26px; height: 26px; border-radius: 8px; background: rgba(34, 211, 238, 0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.8 2.8 6.2-6.4' fill='none' stroke='%2322D3EE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; border: 1px solid rgba(34, 211, 238, 0.3); }
.ewg-stack h3 { font-size: 16px; margin-bottom: 4px; }
.ewg-stack p { font-size: 14.5px; color: var(--text-2); }

/* ---- Terminal-style panel ---- */
.ewg-term { padding: 0; overflow: hidden; font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; }
.ewg-term__bar { display: flex; align-items: center; gap: 7px; padding: 14px 18px; border-bottom: 1px solid var(--glass-border); background: rgba(4, 16, 40, 0.45); }
.ewg-term__bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(148, 197, 255, 0.25); }
.ewg-term__bar i:nth-child(1) { background: #F87171; } .ewg-term__bar i:nth-child(2) { background: #FBBF24; } .ewg-term__bar i:nth-child(3) { background: #4ADE80; }
.ewg-term__bar span { margin-left: 8px; font-size: 12.5px; color: var(--muted); }
.ewg-term dl { padding: 18px 22px 22px; display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; font-size: 13.5px; }
.ewg-term dt { color: var(--muted); }
.ewg-term dd { color: var(--text); }
.ewg-term dd em { font-style: normal; color: #86EFAC; }

/* ---- Timeline (migration steps) ---- */
.ewg-timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; position: relative; counter-reset: tl; }
.ewg-timeline::before { content: ''; position: absolute; top: 22px; left: 10%; right: 10%; height: 2px; background: linear-gradient(90deg, rgba(34, 211, 238, 0.1), var(--cyan), rgba(34, 211, 238, 0.1)); }
.ewg-timeline li { position: relative; text-align: center; counter-increment: tl; padding: 0 4px; }
.ewg-timeline li::before { content: counter(tl); position: relative; z-index: 1; display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 16px; border-radius: 50%; font-family: var(--font-head); font-weight: 800; color: #04212A; background: linear-gradient(135deg, var(--cyan), #A5F3FC); box-shadow: 0 0 0 6px rgba(34, 211, 238, 0.12), 0 0 24px var(--cyan-glow); }
.ewg-timeline h3 { font-size: 15.5px; margin-bottom: 6px; }
.ewg-timeline p { font-size: 13.5px; color: var(--text-2); }

/* ---- Latency bars ---- */
.ewg-latency { padding: 30px; }
.ewg-latency h3 { font-size: 15px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); margin-bottom: 22px; }
.ewg-lat { margin-bottom: 20px; }
.ewg-lat:last-of-type { margin-bottom: 0; }
.ewg-lat__head { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; margin-bottom: 8px; color: var(--text-2); }
.ewg-lat__head b { font-family: var(--font-head); color: var(--text); font-weight: 600; }
.ewg-lat__track { height: 12px; border-radius: 100px; background: rgba(4, 16, 40, 0.5); border: 1px solid var(--glass-border); overflow: hidden; }
.ewg-lat__fill { height: 100%; border-radius: inherit; width: var(--w, 50%); }
.ewg-lat__fill--good { background: linear-gradient(90deg, #4ADE80, var(--cyan)); }
.ewg-lat__fill--bad { background: linear-gradient(90deg, var(--amber), #F87171); }
.ewg-latency small { display: block; margin-top: 18px; color: var(--muted); font-size: 12.5px; }

/* ---- Security list (2-col) ---- */
.ewg-sec { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.ewg-sec article { padding: 26px; border-radius: var(--r-md); }
.ewg-sec h3 { font-size: 17px; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.ewg-sec h3 .ewg-icon { width: 36px; height: 36px; margin: 0; border-radius: 10px; }
.ewg-sec p { color: var(--text-2); font-size: 14.5px; }
.ewg-sec article.ewg-sec--you { border-style: dashed; }

/* ---- Prose block ---- */
.ewg-prose p { color: var(--text-2); font-size: 16px; margin-bottom: 14px; }
.ewg-prose p:last-child { margin-bottom: 0; }

@media (max-width: 1080px) {
  .ewg-plans { grid-template-columns: 1fr 1fr; }
  .ewg-timeline { grid-template-columns: 1fr; gap: 0; text-align: left; }
  .ewg-timeline::before { top: 10px; bottom: 10px; left: 22px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, rgba(34, 211, 238, 0.1), var(--cyan), rgba(34, 211, 238, 0.1)); }
  .ewg-timeline li { text-align: left; padding: 0 0 26px 70px; }
  .ewg-timeline li::before { position: absolute; left: 0; top: -4px; margin: 0; }
}
@media (max-width: 760px) {
  .ewg-plans, .ewg-scope, .ewg-sec { grid-template-columns: 1fr; }
  .ewg-band { grid-template-columns: 1fr 1fr; }
  .ewg-band > div:nth-child(2) { border-right: 0; }
  .ewg-band > div:nth-child(n+3) { border-top: 1px solid var(--glass-border); }
  .ewg-summary, .ewg-latency { padding: 22px; }
  .ewg-summary__price strong { font-size: 40px; }
  .ewg-callout { flex-direction: column; padding: 22px; }
  .ewg-term dl { grid-template-columns: 1fr; gap: 2px; }
  .ewg-term dd { margin-bottom: 8px; }
}

/* ==========================================================================
   INNER PAGES WITHOUT BOOTSTRAP (dedicated / VPS / WordPress pages)
   Add class="ewg-base" to <body>. Recreates the base the old inner pages
   had, so header.php and footer-new.php render as before. :where() keeps
   specificity at zero so no component below is affected.
   ========================================================================== */
body.ewg-base { margin: 0; font-family: 'Poppins', sans-serif; background: #f8fafc; color: #1e293b; line-height: 1.7; -webkit-font-smoothing: antialiased; }
:where(body.ewg-base *), :where(body.ewg-base *)::before, :where(body.ewg-base *)::after { box-sizing: border-box; margin: 0; padding: 0; }
.ewg-hero--inner { padding-top: 120px; }

/* ==========================================================================
   SERVER PLAN TABLE (server-plans.php)
   ========================================================================== */
.ewg-plansbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.ewg-plansbar__note { font-size: 14px; color: var(--text-2); }
.ewg-plansbar__note a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }

.ewg-cur { display: inline-flex; gap: 4px; padding: 4px; border-radius: 100px; background: rgba(4, 16, 40, 0.45); border: 1px solid var(--glass-border); }
.ewg-cur__btn { appearance: none; border: 0; cursor: pointer; background: transparent; color: var(--text-2); font-family: var(--font-head); font-weight: 600; font-size: 13.5px; padding: 8px 18px; border-radius: 100px; transition: background 0.25s var(--ease), color 0.25s var(--ease); }
.ewg-cur__btn:hover { color: var(--text); }
.ewg-cur__btn[aria-pressed="true"] { background: linear-gradient(135deg, var(--cyan), var(--cyan-2)); color: #04212A; }

.ewg-ptable { display: grid; gap: 10px; }
.ewg-ptable__head, .ewg-prow { display: grid; grid-template-columns: 2.4fr 1.1fr 1fr 1.25fr 1fr 1.15fr 1.25fr; gap: 14px; align-items: center; }
.ewg-ptable__head { padding: 0 22px 6px; font-family: var(--font-head); font-size: 11.5px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
.ewg-ptable__head span:nth-child(6) { text-align: right; }
.ewg-prow { padding: 16px 22px; border-radius: var(--r-md); background: linear-gradient(160deg, var(--glass-strong), var(--glass)); border: 1px solid var(--glass-border); transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.ewg-prow:hover { transform: translateY(-2px); border-color: var(--glass-border-hi); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25); }
.ewg-prow--hl { border-color: rgba(34, 211, 238, 0.45); background: linear-gradient(100deg, rgba(34, 211, 238, 0.14), rgba(255, 255, 255, 0.04) 40%); }
.ewg-prow__name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ewg-prow__name strong { font-family: var(--font-head); font-size: 15.5px; color: var(--text); line-height: 1.3; }
.ewg-prow__name > span:last-child { font-size: 12.5px; color: var(--muted); }
.ewg-prow__badge { align-self: flex-start; font-family: var(--font-head); font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #04212A; background: var(--cyan); padding: 2px 9px; border-radius: 100px; margin-bottom: 4px; }
.ewg-prow__c b { display: block; font-family: var(--font-head); font-size: 14.5px; color: var(--text); font-weight: 600; }
.ewg-prow__c small { display: block; font-size: 11.5px; color: var(--muted); }
.ewg-prow__price { text-align: right; white-space: nowrap; }
.ewg-money { font-family: var(--font-head); font-size: 21px; font-weight: 800; letter-spacing: -0.5px; color: var(--text); }
.ewg-prow__price small { color: var(--muted); font-size: 12px; margin-left: 2px; }
.ewg-prow__act { display: flex; justify-content: flex-end; }
.ewg-prow__act .ewg-btn { padding: 11px 18px; font-size: 13.5px; width: 100%; max-width: 150px; }

.ewg-custom { align-items: center; margin-top: 22px; }
.ewg-custom .ewg-btn { margin-left: auto; flex-shrink: 0; }
.ewg-included { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-top: 26px; }
.ewg-included li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); }
.ewg-included li::before { content: ''; width: 15px; height: 15px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.8 2.8 6.2-6.4' fill='none' stroke='%2322D3EE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }

@media (max-width: 1080px) {
  .ewg-ptable__head { display: none; }
  .ewg-prow { grid-template-columns: repeat(4, 1fr); grid-template-areas: "n n n n" "a b c d" "p p e e"; row-gap: 12px; }
  .ewg-prow__name { grid-area: n; }
  .ewg-prow__c:nth-child(2) { grid-area: a; } .ewg-prow__c:nth-child(3) { grid-area: b; }
  .ewg-prow__c:nth-child(4) { grid-area: c; } .ewg-prow__c:nth-child(5) { grid-area: d; }
  .ewg-prow__price { grid-area: p; text-align: left; }
  .ewg-prow__act { grid-area: e; }
  .ewg-prow__c::before { content: attr(data-label); display: block; font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 2px; }
  .ewg-prow__c { padding-top: 10px; border-top: 1px solid var(--glass-border); }
  .ewg-prow__c { align-self: stretch; }
}
@media (max-width: 560px) {
  .ewg-prow { grid-template-columns: 1fr 1fr; grid-template-areas: "n n" "a b" "c d" "p e"; padding: 16px; }
  .ewg-money { font-size: 19px; }
  .ewg-custom .ewg-btn { margin-left: 0; width: 100%; }
  .ewg-plansbar { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   ADD-ON TABLES (server-addons.php)
   ========================================================================== */
.ewg-addons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; align-items: start; }
.ewg-addon { padding: 0; overflow: hidden; border-radius: var(--r-md); }
.ewg-addon__t { width: 100%; border-collapse: collapse; }
.ewg-addon__t caption { text-align: left; padding: 16px 22px; font-family: var(--font-head); font-weight: 700; font-size: 16px; color: var(--text); background: rgba(4, 16, 40, 0.4); border-bottom: 1px solid var(--glass-border); }
.ewg-addon__t thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ewg-addon__t th, .ewg-addon__t td { padding: 11px 22px; font-size: 14px; border-bottom: 1px solid rgba(148, 197, 255, 0.08); text-align: left; }
.ewg-addon__t tbody th { font-weight: 500; color: var(--text-2); font-family: var(--font-body); }
.ewg-addon__t td { text-align: right; font-family: var(--font-head); font-weight: 600; color: var(--text); white-space: nowrap; }
.ewg-addon__t tr:last-child th, .ewg-addon__t tr:last-child td { border-bottom: 0; }
.ewg-free { font-size: 12px; font-weight: 700; color: #86EFAC; background: rgba(74, 222, 128, 0.12); border: 1px solid rgba(74, 222, 128, 0.3); padding: 3px 10px; border-radius: 100px; }
@media (max-width: 760px) { .ewg-addons { grid-template-columns: 1fr; } .ewg-addon__t th, .ewg-addon__t td { padding: 10px 16px; } }

/* ==========================================================================
   MEDIA CARDS (blog-post-latest.php, related-products.inc.php)
   ========================================================================== */
.ewg-cards { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
.ewg-cards--1 { grid-template-columns: minmax(0, 420px); justify-content: center; }
.ewg-cards--2 { grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; }
.ewg-cards--4 { grid-template-columns: repeat(4, 1fr); }
.ewg-mcard { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.ewg-mcard:hover { transform: translateY(-5px); border-color: var(--glass-border-hi); }
.ewg-mcard__img { display: block; aspect-ratio: 16 / 9; background: linear-gradient(135deg, rgba(34, 211, 238, 0.18), rgba(11, 44, 99, 0.6)); overflow: hidden; }
.ewg-mcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.ewg-mcard:hover .ewg-mcard__img img { transform: scale(1.05); }
.ewg-mcard__body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.ewg-mcard__k { font-family: var(--font-head); font-size: 11.5px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; color: var(--cyan); margin-bottom: 8px; }
.ewg-mcard__t { font-family: var(--font-head); font-size: 16.5px; font-weight: 700; color: var(--text); line-height: 1.35; margin-bottom: 8px; }
.ewg-mcard__d { font-size: 14px; color: var(--text-2); flex: 1; margin-bottom: 14px; }
.ewg-mcard__more { font-family: var(--font-head); font-size: 13.5px; font-weight: 600; color: var(--cyan); }
@media (max-width: 1080px) { .ewg-cards, .ewg-cards--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .ewg-cards, .ewg-cards--2, .ewg-cards--4 { grid-template-columns: 1fr; } }

/* ==========================================================================
   DEDICATED-PAGE EXTRAS
   ========================================================================== */
/* Hero spec panel */
.ewg-specpanel { padding: 0; overflow: hidden; }
.ewg-specpanel dl { padding: 20px 24px 8px; display: grid; gap: 0; }
.ewg-specpanel dl > div { display: grid; grid-template-columns: 120px 1fr; gap: 14px; padding: 11px 0; border-bottom: 1px solid rgba(148, 197, 255, 0.09); font-size: 14px; }
.ewg-specpanel dl > div:last-child { border-bottom: 0; }
.ewg-specpanel dt { color: var(--muted); }
.ewg-specpanel dd { color: var(--text); font-weight: 500; }
.ewg-specpanel__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 18px 24px; border-top: 1px solid var(--glass-border); background: rgba(4, 16, 40, 0.3); }

/* Wrapping tabs (distros / editions) */
.ewg-tabs--wrap { display: flex; flex-wrap: wrap; gap: 6px; }
.ewg-tabs--wrap .ewg-tab { flex: 1 1 auto; padding: 10px 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.ewg-tabs--wrap .ewg-tab img { width: 18px; height: 18px; object-fit: contain; }
.ewg-tabpanel { padding: 28px; }
.ewg-tabpanel h3 { font-size: 22px; margin-bottom: 8px; }
.ewg-tabpanel > p { color: var(--text-2); font-size: 15px; margin-bottom: 18px; max-width: 820px; }
.ewg-vtable { width: 100%; border-collapse: collapse; }
.ewg-vtable th, .ewg-vtable td { text-align: left; padding: 11px 0; font-size: 14.5px; border-bottom: 1px solid rgba(148, 197, 255, 0.09); }
.ewg-vtable thead th { font-family: var(--font-head); font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.ewg-vtable tbody th { color: var(--text); font-weight: 500; font-family: var(--font-body); }
.ewg-vtable td { text-align: right; }
.ewg-pill { display: inline-block; font-family: var(--font-head); font-size: 12px; font-weight: 600; padding: 3px 11px; border-radius: 100px; white-space: nowrap; }
.ewg-pill--ok { color: #86EFAC; background: rgba(74, 222, 128, 0.12); border: 1px solid rgba(74, 222, 128, 0.3); }
.ewg-pill--warn { color: #FCD34D; background: rgba(245, 165, 36, 0.12); border: 1px solid rgba(245, 165, 36, 0.32); }
.ewg-pill--eol { color: #FCA5A5; background: rgba(248, 113, 113, 0.12); border: 1px solid rgba(248, 113, 113, 0.3); }
.ewg-pill--info { color: var(--cyan); background: rgba(34, 211, 238, 0.10); border: 1px solid rgba(34, 211, 238, 0.3); }

/* Photo / video gallery */
.ewg-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ewg-gallery--3 { grid-template-columns: repeat(3, 1fr); }
.ewg-gallery--2 { grid-template-columns: repeat(2, 1fr); }
.ewg-gallery figure { padding: 0; overflow: hidden; border-radius: var(--r-md); display: flex; flex-direction: column; }
.ewg-gallery img, .ewg-gallery video { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; background: var(--navy-800); }
.ewg-gallery figcaption { padding: 12px 16px 14px; font-size: 13.5px; color: var(--text-2); }
.ewg-media { padding: 0; overflow: hidden; border-radius: var(--r-lg); }
.ewg-media video, .ewg-media img { width: 100%; display: block; aspect-ratio: 16 / 10; object-fit: cover; background: var(--navy-800); }
.ewg-media figcaption { padding: 14px 20px; font-size: 13.5px; color: var(--text-2); }
@media (max-width: 1080px) { .ewg-gallery, .ewg-gallery--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ewg-gallery, .ewg-gallery--3 { grid-template-columns: 1fr; } .ewg-gallery--2 { grid-template-columns: 1fr 1fr; gap: 10px; } }

/* Numbered process (2 columns) */
.ewg-flow { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; counter-reset: flow; }
.ewg-flow li { counter-increment: flow; padding: 24px 24px 24px 78px; position: relative; border-radius: var(--r-md); }
.ewg-flow li::before { content: counter(flow); position: absolute; left: 22px; top: 22px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-head); font-weight: 800; color: #04212A; background: linear-gradient(135deg, var(--cyan), #A5F3FC); box-shadow: 0 0 18px var(--cyan-glow); }
.ewg-flow h3 { font-size: 16.5px; margin-bottom: 6px; }
.ewg-flow p { font-size: 14.5px; color: var(--text-2); }
.ewg-flow li.ewg-flow--key { border-color: rgba(245, 165, 36, 0.45); background: linear-gradient(160deg, rgba(245, 165, 36, 0.10), var(--glass)); }
@media (max-width: 760px) { .ewg-flow { grid-template-columns: 1fr; } .ewg-flow li { padding: 20px 18px 20px 70px; } .ewg-flow li::before { left: 16px; top: 18px; } }

.ewg-band--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .ewg-band--3 { grid-template-columns: 1fr; } .ewg-band--3 > div { border-right: 0 !important; border-top: 1px solid var(--glass-border); } .ewg-band--3 > div:first-child { border-top: 0; } }

/* Bulleted list with titles (managed scope) */
.ewg-dlist { display: grid; gap: 12px; }
.ewg-dlist li { padding: 16px 20px 16px 52px; position: relative; border-radius: var(--r-md); font-size: 14.5px; color: var(--text-2); }
.ewg-dlist li::before { content: ''; position: absolute; left: 18px; top: 19px; width: 20px; height: 20px; border-radius: 6px; background: rgba(34, 211, 238, 0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.8 2.8 6.2-6.4' fill='none' stroke='%2322D3EE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; border: 1px solid rgba(34, 211, 238, 0.3); }
.ewg-dlist strong { color: var(--text); }

/* Generic 2-col and 4-col card grids */
.ewg-grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.ewg-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 1080px) { .ewg-grid4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .ewg-grid2, .ewg-grid4 { grid-template-columns: 1fr; } }
.ewg-h2 { font-size: clamp(28px, 3.2vw, 42px); font-weight: 800; letter-spacing: -1px; margin-bottom: 18px; }
.ewg-table a, .ewg-prose a, .ewg-feature a, .ewg-aud p a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
.ewg-updated { font-size: 13px; color: var(--muted); margin-top: 14px; }

.ewg-table--compact { min-width: 0; }
.ewg-table--compact tbody th { width: auto; }
.ewg-table--compact th, .ewg-table--compact td { padding: 14px 16px; }

/* ---- Author / reviewer box (E-E-A-T) ---- */
.ewg-author { display: flex; gap: 20px; align-items: flex-start; padding: 26px 28px; border-radius: var(--r-lg); }
.ewg-author__img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid var(--glass-border-hi); background: linear-gradient(135deg, var(--navy-600), var(--cyan)); }
.ewg-author__name { font-family: var(--font-head); font-weight: 700; font-size: 17px; color: var(--text); }
.ewg-author__role { font-size: 13.5px; color: var(--cyan); margin-bottom: 8px; display: block; }
.ewg-author p { font-size: 14.5px; color: var(--text-2); }
.ewg-author small { display: block; margin-top: 10px; font-size: 13px; color: var(--muted); }
@media (max-width: 560px) { .ewg-author { flex-direction: column; padding: 22px; } }

/* ---- Responsibility matrix legend ---- */
.ewg-legend { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-bottom: 16px; font-size: 13.5px; color: var(--text-2); }
.ewg-legend span { display: inline-flex; align-items: center; gap: 8px; }
.ewg-table td .ewg-pill { margin: 0; }

/* ==========================================================================
   VPS PLAN CARDS (vps-plans.php)
   ========================================================================== */
.ewg-vps-block + .ewg-vps-block { margin-top: 56px; }
.ewg-vplans { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.ewg-vplans > .ewg-plan { flex: 0 1 calc(25% - 15px); max-width: calc(25% - 15px); }
.ewg-vplans--3 > .ewg-plan { flex-basis: calc(33.333% - 14px); max-width: calc(33.333% - 14px); }
.ewg-plan__price .ewg-money { font-size: 38px; font-weight: 800; letter-spacing: -1.5px; line-height: 1; }
@media (max-width: 1080px) { .ewg-vplans > .ewg-plan, .ewg-vplans--3 > .ewg-plan { flex-basis: calc(50% - 10px); max-width: calc(50% - 10px); } }
@media (max-width: 640px) { .ewg-vplans > .ewg-plan, .ewg-vplans--3 > .ewg-plan { flex-basis: 100%; max-width: 100%; } }
.ewg-table__group th { background: rgba(34, 211, 238, 0.07); font-family: var(--font-head); color: var(--text) !important; }
.ewg-table__group th a { color: var(--cyan); text-decoration: none; }
.ewg-table__group th span { font-weight: 400; font-size: 12.5px; color: var(--muted); margin-left: 8px; }
.ewg-table .ewg-money { font-size: 15.5px; font-weight: 700; letter-spacing: 0; }
.ewg-tlink { font-family: var(--font-head); font-weight: 600; color: var(--cyan) !important; text-decoration: none !important; }
.ewg-tlink:hover { color: var(--cyan-2) !important; }

/* Chooser cards (VPS hub) */
.ewg-chooser { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.ewg-chooser .ewg-aud { display: flex; flex-direction: column; }
.ewg-chooser .ewg-aud p { flex: 1; }
.ewg-chooser .ewg-price { margin: 4px 0 10px; display: block; }
.ewg-chooser .ewg-price strong { font-size: 26px; }
@media (max-width: 1080px) { .ewg-chooser { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .ewg-chooser { grid-template-columns: 1fr; } }
.ewg-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13.5px; color: #A5F3FC; background: rgba(4, 16, 40, 0.5); border: 1px solid var(--glass-border); padding: 2px 7px; border-radius: 6px; }

/* ==========================================================================
   COMPANY & LEGAL PAGES (about, contact, payment, terms, privacy, abuse)
   ========================================================================== */
/* Compact hero: one column, no spec panel */
.ewg-hero--compact { padding-bottom: 64px; }
.ewg-hero--compact .ewg-hero__lead { max-width: 720px; }
.ewg-hero__single { max-width: 860px; }

/* ---- Forms ---- */
.ewg-form { padding: 34px 34px 30px; border-radius: var(--r-lg); }
.ewg-form h2 { font-size: 26px; letter-spacing: -0.5px; margin-bottom: 6px; }
.ewg-form > p { color: var(--text-2); font-size: 15px; margin-bottom: 24px; }
.ewg-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ewg-form__full { grid-column: 1 / -1; }
.ewg-form fieldset { border: 1px solid var(--glass-border); border-radius: var(--r-md); padding: 18px 18px 6px; margin: 4px 0 0; grid-column: 1 / -1; }
.ewg-form legend { font-family: var(--font-head); font-size: 13px; font-weight: 600; color: var(--cyan); padding: 0 8px; letter-spacing: .5px; }
.ewg-form fieldset .ewg-form__grid { margin-bottom: 12px; }
.ewg-field { display: flex; flex-direction: column; gap: 7px; }
.ewg-field label { font-family: var(--font-head); font-size: 12.5px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--text-2); }
.ewg-field label span { color: var(--amber-2); }
.ewg .ewg-field input, .ewg .ewg-field select, .ewg .ewg-field textarea {
  width: 100%; font: inherit; font-size: 15px; color: var(--text);
  background: rgba(4, 16, 40, 0.45); border: 1px solid var(--glass-border); border-radius: var(--r-sm);
  padding: 12px 14px; outline: none; transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.ewg .ewg-field select { appearance: none; -webkit-appearance: none; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%2322D3EE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 14px; }
.ewg .ewg-field select option { background: #0B1A2E; color: var(--text); }
.ewg .ewg-field textarea { min-height: 140px; resize: vertical; }
.ewg .ewg-field input::placeholder, .ewg .ewg-field textarea::placeholder { color: rgba(179, 194, 214, 0.55); }
.ewg .ewg-field input:focus, .ewg .ewg-field select:focus, .ewg .ewg-field textarea:focus { border-color: var(--glass-border-hi); box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15); }
.ewg-form__foot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 22px; }
.ewg-form__foot small { color: var(--muted); font-size: 13px; }
.ewg-alert { padding: 14px 18px; border-radius: var(--r-sm); font-size: 15px; margin-bottom: 20px; border: 1px solid; }
.ewg-alert--ok { background: rgba(74, 222, 128, 0.1); border-color: rgba(74, 222, 128, 0.45); color: #C9F7DA; }
.ewg-alert--err { background: rgba(248, 113, 113, 0.1); border-color: rgba(248, 113, 113, 0.45); color: #FECACA; }
.ewg-contact-grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: 26px; align-items: start; }
.ewg-cinfo { padding: 30px; border-radius: var(--r-lg); }
.ewg-cinfo h2 { font-size: 22px; margin-bottom: 18px; }
.ewg-cinfo dl { display: grid; gap: 18px; }
.ewg-cinfo dt { font-size: 12px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); font-weight: 600; margin-bottom: 3px; }
.ewg-cinfo dd { color: var(--text); font-size: 15.5px; line-height: 1.6; }
.ewg-cinfo dd a { color: var(--text); border-bottom: 1px solid rgba(34, 211, 238, 0.35); }
.ewg-cinfo dd a:hover { color: var(--cyan); }
.ewg-social { display: flex; gap: 10px; margin-top: 22px; }
.ewg-social a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--glass-border); color: var(--text-2); background: rgba(255, 255, 255, 0.04); transition: all .2s var(--ease); }
.ewg-social a:hover { color: var(--cyan); border-color: var(--glass-border-hi); }
@media (max-width: 960px) { .ewg-contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .ewg-form { padding: 24px 18px; } .ewg-form__grid { grid-template-columns: 1fr; } .ewg-cinfo { padding: 24px 20px; } }

/* ---- Legal documents (terms, privacy, abuse) ---- */
.ewg-legal { display: grid; grid-template-columns: 240px 1fr; gap: 40px; align-items: start; }
.ewg-toc { position: sticky; top: 110px; padding: 22px; border-radius: var(--r-md); }
.ewg-toc .ewg-kicker { display: block; margin-bottom: 12px; }
.ewg-toc ol { display: grid; gap: 4px; counter-reset: toc; }
.ewg-toc li { counter-increment: toc; }
.ewg-toc a { display: flex; gap: 10px; padding: 7px 8px; border-radius: 8px; font-size: 14px; color: var(--text-2); transition: background .2s var(--ease), color .2s var(--ease); }
.ewg-toc a::before { content: counter(toc); font-family: var(--font-head); font-weight: 700; font-size: 12px; color: var(--cyan); min-width: 14px; padding-top: 2px; }
.ewg-toc a:hover { color: var(--text); background: rgba(34, 211, 238, 0.07); }
.ewg-doc { display: grid; gap: 22px; min-width: 0; }
.ewg-doc > section { padding: 34px 36px; border-radius: var(--r-lg); scroll-margin-top: 110px; }
.ewg-doc h2 { font-size: 24px; letter-spacing: -0.4px; margin-bottom: 12px; }
.ewg-doc h3 { font-size: 16.5px; margin: 22px 0 6px; }
.ewg-doc p, .ewg-doc li { color: var(--text-2); font-size: 15.5px; line-height: 1.75; }
.ewg-doc p + p { margin-top: 10px; }
.ewg-doc a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
.ewg-doc .ewg-clauses { display: grid; gap: 0; counter-reset: none; margin-top: 8px; }
.ewg-doc .ewg-clauses > li { display: grid; grid-template-columns: 52px 1fr; gap: 14px; padding: 16px 0; border-top: 1px solid rgba(148, 197, 255, 0.1); }
.ewg-doc .ewg-clauses > li:first-child { border-top: 0; }
.ewg-clause__n { font-family: var(--font-head); font-weight: 700; font-size: 13px; color: var(--cyan); padding-top: 2px; }
.ewg-doc .ewg-clauses h3 { margin: 0 0 4px; font-size: 15.5px; }
.ewg-doc ul.ewg-bullets { display: grid; gap: 8px; margin-top: 10px; }
.ewg-doc ul.ewg-bullets li { position: relative; padding-left: 22px; }
.ewg-doc ul.ewg-bullets li::before { content: ''; position: absolute; left: 4px; top: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan-glow); }
.ewg-note { margin-top: 16px; padding: 16px 18px; border-radius: var(--r-sm); border: 1px solid rgba(245, 165, 36, 0.4); background: rgba(245, 165, 36, 0.08); }
.ewg-note p, .ewg-note li { color: #FDE7C0; font-size: 15px; }
.ewg-note--info { border-color: rgba(34, 211, 238, 0.35); background: rgba(34, 211, 238, 0.07); }
.ewg-note--info p, .ewg-note--info li { color: var(--text); }
.ewg-doc .ewg-table-wrap { margin-top: 14px; }
@media (max-width: 960px) { .ewg-legal { grid-template-columns: 1fr; } .ewg-toc { position: static; } }
@media (max-width: 640px) { .ewg-doc > section { padding: 24px 20px; } .ewg-doc .ewg-clauses > li { grid-template-columns: 40px 1fr; gap: 10px; } }

/* ---- About: history list ---- */
.ewg-history { position: relative; display: grid; gap: 18px; max-width: 880px; margin: 0 auto; }
.ewg-history::before { content: ''; position: absolute; left: 47px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, rgba(34, 211, 238, 0.05), var(--cyan), rgba(34, 211, 238, 0.05)); }
.ewg-history li { position: relative; display: grid; grid-template-columns: 96px 1fr; gap: 22px; align-items: start; }
.ewg-history__y { position: relative; z-index: 1; display: grid; place-items: center; width: 96px; height: 44px; border-radius: 100px; font-family: var(--font-head); font-weight: 800; font-size: 16px; color: #04212A; background: linear-gradient(135deg, var(--cyan), #A5F3FC); box-shadow: 0 0 0 6px rgba(34, 211, 238, 0.1), 0 0 24px var(--cyan-glow); }
.ewg-history__c { padding: 18px 22px; border-radius: var(--r-md); }
.ewg-history__c h3 { font-size: 17px; margin-bottom: 4px; }
.ewg-history__c p { color: var(--text-2); font-size: 15px; }
@media (max-width: 560px) { .ewg-history::before { left: 35px; } .ewg-history li { grid-template-columns: 72px 1fr; gap: 14px; } .ewg-history__y { width: 72px; font-size: 14px; } }

/* ---- About: recognition / press / partner logos ---- */
.ewg-press { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ewg-press__item { padding: 22px; border-radius: var(--r-lg); display: flex; flex-direction: column; gap: 14px; }
.ewg-press__logo { height: 120px; border-radius: var(--r-sm); background: rgba(255, 255, 255, 0.94); display: grid; place-items: center; padding: 14px; overflow: hidden; }
.ewg-press__logo img { max-height: 92px; width: auto; object-fit: contain; }
.ewg-press__item h3 { font-size: 17px; }
.ewg-press__item p { color: var(--text-2); font-size: 14.5px; flex: 1; }
.ewg-press__item a.ewg-tlink { align-self: flex-start; }
.ewg-logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ewg-logos li { height: 96px; display: grid; place-items: center; padding: 18px; border-radius: var(--r-md); background: rgba(255, 255, 255, 0.94); }
.ewg-logos img { max-height: 52px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter .3s var(--ease), opacity .3s var(--ease); }
.ewg-logos li:hover img { filter: none; opacity: 1; }
@media (max-width: 960px) { .ewg-press { grid-template-columns: 1fr 1fr; } .ewg-logos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .ewg-press { grid-template-columns: 1fr; } }

/* ---- Payment: bank details ---- */
.ewg-bank { padding: 30px; border-radius: var(--r-lg); }
.ewg-bank h3 { font-size: 20px; margin-bottom: 4px; }
.ewg-bank > p { color: var(--text-2); font-size: 15px; margin-bottom: 18px; }
.ewg-bank dl { display: grid; gap: 0; }
.ewg-bank dl > div { display: grid; grid-template-columns: 150px 1fr auto; gap: 12px; align-items: center; padding: 13px 0; border-top: 1px solid rgba(148, 197, 255, 0.1); }
.ewg-bank dl > div:first-child { border-top: 0; }
.ewg-bank dt { font-size: 12.5px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); font-weight: 600; }
.ewg-bank dd { font-family: var(--font-head); font-weight: 600; font-size: 16px; color: var(--text); letter-spacing: .3px; word-break: break-all; }
.ewg .ewg-copy { font-family: var(--font-head); font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--glass-border); background: rgba(255, 255, 255, 0.04); color: var(--cyan); cursor: pointer; }
.ewg .ewg-copy:hover { border-color: var(--glass-border-hi); }
@media (max-width: 560px) { .ewg-bank { padding: 22px 18px; } .ewg-bank dl > div { grid-template-columns: 1fr auto; } .ewg-bank dt { grid-column: 1 / -1; } }
.ewg-hero--compact + .ewg-section { padding-top: 24px; }

/* ==========================================================================
   SITE HEADER (header.php) — .ewh-*
   Navy glass bar, cyan accents, amber CTA. Plain fade-in dropdowns.
   Works on Bootstrap pages (index.php) and ewg-base inner pages.
   ========================================================================== */
.ewh, .ewf {
  --h-navy: #06122A;
  --h-navy-2: #0A1E44;
  --h-line: rgba(148, 197, 255, 0.16);
  --h-cyan: #22D3EE;
  --h-amber: #F5A524;
  --h-text: #E8F0FA;
  --h-text-2: #A9BAD1;
  font-family: 'DM Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.ewh *, .ewh *::before, .ewh *::after,
.ewf *, .ewf *::before, .ewf *::after { box-sizing: border-box; }
.ewh ul, .ewf ul { list-style: none; margin: 0; padding: 0; }
.ewh p, .ewf p { margin: 0; }
.ewh a, .ewf a { text-decoration: none; }
.ewh a:hover, .ewh a:focus, .ewf a:hover, .ewf a:focus { text-decoration: none; }
.ewh button { font: inherit; }

.ewh-skip { position: absolute; left: -9999px; top: 8px; z-index: 1001; background: #22D3EE; color: #06122A; padding: 8px 14px; border-radius: 8px; font-weight: 600; }
.ewh-skip:focus { left: 12px; }

.ewh { position: sticky; top: 0; z-index: 1000; }
.ewh-wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; }

/* Top bar */
.ewh-top { background: #040B1C; border-bottom: 1px solid var(--h-line); font-size: 13px; color: var(--h-text-2); }
.ewh-top__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 36px; }
.ewh-top__note { display: flex; align-items: center; gap: 8px; }
.ewh-dot { width: 7px; height: 7px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 0 3px rgba(74, 222, 128, .18); }
.ewh-top__links { display: flex; align-items: center; gap: 22px; }
.ewh-top__links a { color: var(--h-text-2); display: inline-flex; align-items: center; gap: 7px; transition: color .2s; }
.ewh-top__links a:hover, .ewh-top__links a:focus-visible { color: var(--h-cyan); }
.ewh-top__links .fa { color: var(--h-cyan); font-size: 13px; }

/* Main bar */
.ewh-bar {
  background: rgba(6, 18, 42, 0.88);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--h-line);
  box-shadow: 0 8px 28px rgba(2, 8, 22, .35);
}
.ewh-bar::after { content: ""; display: block; height: 2px; background: linear-gradient(90deg, transparent, rgba(34, 211, 238, .55) 30%, rgba(56, 189, 248, .55) 70%, transparent); opacity: .6; }
.ewh-bar__inner { display: flex; align-items: center; gap: 24px; min-height: 68px; position: relative; }
.ewh-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
/* The logo file is dark-on-transparent; render it white on the navy bar.
   Remove this filter if you upload a light version of the logo. */
.ewh-logo img { height: 38px; width: auto; display: block; filter: brightness(0) invert(1); }

.ewh-menu { display: flex; align-items: center; flex: 1; gap: 16px; }
.ewh-list { display: flex; align-items: center; gap: 2px; margin-right: auto !important; }
.ewh-item { position: relative; }
.ewh-link {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 0; cursor: pointer;
  color: var(--h-text); font-size: 15px; font-weight: 500; line-height: 1;
  padding: 12px 14px; border-radius: 10px;
  transition: color .2s, background-color .2s;
}
.ewh-link .fa { font-size: 14px; color: var(--h-text-2); transition: transform .2s, color .2s; }
.ewh-link:hover, .ewh-item.is-open > .ewh-link { color: #fff; background: rgba(255, 255, 255, .06); }
.ewh-link:hover .fa, .ewh-item.is-open > .ewh-link .fa { color: var(--h-cyan); }
.ewh-item.is-open > .ewh-link .fa { transform: rotate(180deg); }
.ewh-item.is-current > .ewh-link { color: var(--h-cyan); }
.ewh-link:focus-visible, .ewh-dd__link:focus-visible, .ewh-btn:focus-visible, .ewh-burger:focus-visible { outline: 2px solid var(--h-cyan); outline-offset: 2px; }

/* Dropdown panel */
.ewh-dd {
  position: absolute; top: calc(100% + 10px); left: 0;
  min-width: 300px; padding: 14px;
  display: grid; gap: 6px 14px;
  background: linear-gradient(180deg, rgba(13, 34, 74, .98), rgba(7, 20, 46, .98));
  border: 1px solid var(--h-line); border-radius: 16px;
  box-shadow: 0 24px 60px rgba(2, 8, 22, .55), inset 0 1px 0 rgba(255, 255, 255, .05);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.ewh-dd::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* hover bridge */
.ewh-dd--wide { grid-template-columns: repeat(2, minmax(260px, 1fr)); min-width: 600px; }
.ewh-item.is-open > .ewh-dd { opacity: 1; visibility: visible; transform: none; transition: opacity .18s ease, transform .18s ease, visibility 0s; }
.ewh-item:last-child > .ewh-dd { left: auto; right: 0; }

.ewh-dd__head { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--h-cyan); padding: 6px 10px 8px; }
.ewh-dd__link { display: flex; gap: 12px; align-items: flex-start; padding: 10px; border-radius: 10px; color: var(--h-text); transition: background-color .15s; }
.ewh-dd__link:hover, .ewh-dd__link:focus-visible { background: rgba(34, 211, 238, .08); color: #fff; }
.ewh-dd__link.is-current { background: rgba(34, 211, 238, .12); }
.ewh-dd__icon { flex: 0 0 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: rgba(34, 211, 238, .1); border: 1px solid rgba(34, 211, 238, .2); color: var(--h-cyan); font-size: 15px; }
.ewh-dd__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ewh-dd__title { font-family: 'Sora', system-ui, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; }
.ewh-dd__desc { font-size: 12.5px; color: var(--h-text-2); line-height: 1.4; }
.ewh-tag { font-style: normal; font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #06122A; background: var(--h-amber); padding: 2px 6px; border-radius: 999px; margin-left: 4px; vertical-align: 1px; }

/* Buttons */
.ewh-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.ewh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 600; line-height: 1; padding: 11px 16px; border-radius: 10px; transition: background-color .2s, border-color .2s, color .2s; white-space: nowrap; }
.ewh-btn--ghost { color: var(--h-text); border: 1px solid rgba(148, 197, 255, .28); }
.ewh-btn--ghost:hover, .ewh-btn--ghost:focus { color: #fff; border-color: var(--h-cyan); }
.ewh-btn--cta { color: #1A1203; background: var(--h-amber); }
.ewh-btn--cta:hover, .ewh-btn--cta:focus { color: #1A1203; background: #FFBE4D; }

/* Burger */
.ewh-burger { display: none; margin-left: auto; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--h-line); background: rgba(255, 255, 255, .04); cursor: pointer; padding: 0; position: relative; }
.ewh-burger span { position: absolute; left: 12px; right: 12px; height: 2px; border-radius: 2px; background: var(--h-text); transition: transform .2s, opacity .2s; }
.ewh-burger span:nth-child(1) { top: 15px; }
.ewh-burger span:nth-child(2) { top: 21px; }
.ewh-burger span:nth-child(3) { top: 27px; }
.ewh-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.ewh-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ewh-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1180px) {
  .ewh-link { padding: 12px 10px; font-size: 14.5px; }
  .ewh-btn--ghost { display: none; }
}

/* Mobile / tablet: slide-down panel with accordion sections */
@media (max-width: 1023px) {
  .ewh-hide-sm { display: none; }
  .ewh-top__note { display: none; }
  .ewh-top__inner { justify-content: center; }
  .ewh-bar__inner { min-height: 62px; }
  .ewh-logo img { height: 32px; }
  .ewh-burger { display: block; }
  .ewh-menu {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    max-height: calc(100vh - 100px); overflow-y: auto; overscroll-behavior: contain;
    background: #071633; border-bottom: 1px solid var(--h-line);
    box-shadow: 0 24px 50px rgba(2, 8, 22, .6);
    padding: 8px 20px 20px;
    display: none;
  }
  .ewh-menu.is-open { display: flex; }
  .ewh-list { flex-direction: column; align-items: stretch; margin-right: 0 !important; }
  .ewh-item { border-bottom: 1px solid var(--h-line); }
  .ewh-link { width: 100%; justify-content: space-between; padding: 16px 4px; font-size: 16px; border-radius: 0; }
  .ewh-link:hover, .ewh-item.is-open > .ewh-link { background: none; }
  .ewh-dd, .ewh-dd--wide {
    position: static; min-width: 0; grid-template-columns: 1fr;
    background: none; border: 0; box-shadow: none; padding: 0 0 12px;
    opacity: 1; visibility: visible; transform: none; transition: none;
    display: none;
  }
  .ewh-dd::before { display: none; }
  .ewh-item.is-open > .ewh-dd { display: grid; }
  .ewh-dd__link { padding: 10px 6px; }
  .ewh-actions { padding-top: 16px; }
  .ewh-actions .ewh-btn { flex: 1; }
  .ewh-btn--ghost { display: inline-flex; }
}
@media (max-width: 520px) {
  .ewh-top__links { gap: 16px; }
  .ewh-top__links li:nth-child(2) span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ewh *, .ewh-dd { transition: none !important; }
}

/* ==========================================================================
   SITE FOOTER (footer.php) — .ewf-*
   ========================================================================== */
.ewf {
  position: relative;
  color: var(--h-text-2);
  font-size: 14.5px; line-height: 1.6;
  background:
    radial-gradient(900px 400px at 85% 0%, rgba(34, 211, 238, .10), transparent 65%),
    radial-gradient(700px 400px at 5% 100%, rgba(56, 189, 248, .08), transparent 65%),
    linear-gradient(180deg, #071633 0%, #050E22 100%);
  border-top: 1px solid var(--h-line);
}
.ewf::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(34, 211, 238, .6), transparent); }
.ewf-wrap { max-width: 1240px; margin: 0 auto; padding: 64px 20px 28px; }
.ewf-grid { display: grid; grid-template-columns: 1.8fr repeat(5, 1fr); gap: 36px 24px; }

.ewf-kicker { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--h-cyan); }
.ewf-lead { font-family: 'Sora', system-ui, sans-serif; color: var(--h-text); font-size: 19px; font-weight: 600; margin-top: 6px !important; }
.ewf-phone { display: inline-block; margin: 10px 0 20px; font-family: 'Sora', system-ui, sans-serif; font-size: 24px; font-weight: 700; color: var(--h-amber); }
.ewf-phone:hover, .ewf-phone:focus { color: #FFBE4D; }
.ewf-contact li { display: flex; gap: 12px; margin-bottom: 12px; }
.ewf-contact .fa { flex: 0 0 16px; color: var(--h-cyan); margin-top: 4px; text-align: center; }
.ewf-contact a { color: var(--h-text-2); }
.ewf-contact a:hover, .ewf-contact a:focus { color: var(--h-cyan); }
.ewf-social { display: flex; gap: 10px; margin-top: 18px; }
.ewf-social a { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: var(--h-text); background: rgba(255, 255, 255, .05); border: 1px solid var(--h-line); transition: border-color .2s, color .2s, background-color .2s; }
.ewf-social a:hover, .ewf-social a:focus { color: var(--h-cyan); border-color: rgba(34, 211, 238, .5); background: rgba(34, 211, 238, .08); }

.ewf-col__title { font-family: 'Sora', system-ui, sans-serif; font-size: 14px; font-weight: 600; color: var(--h-text); margin-bottom: 14px !important; }
.ewf-col li { margin-bottom: 9px; }
.ewf-col a { color: var(--h-text-2); transition: color .2s; }
.ewf-col a:hover, .ewf-col a:focus { color: var(--h-cyan); }

.ewf-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 48px; padding: 22px 0; border-top: 1px solid var(--h-line); border-bottom: 1px solid var(--h-line); }
.ewf-quick { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.ewf-quick a { color: var(--h-text-2); font-size: 14px; }
.ewf-quick a:hover, .ewf-quick a:focus { color: var(--h-cyan); }
.ewf-pay { max-height: 30px; width: auto; max-width: 100%; opacity: .9; }
.ewf-copy { padding-top: 20px; font-size: 13px; color: #8193AD; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; }

@media (max-width: 1100px) { .ewf-grid { grid-template-columns: repeat(3, 1fr); } .ewf-brand { grid-column: 1 / -1; } }
@media (max-width: 640px)  { .ewf-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; } .ewf-wrap { padding-top: 48px; } .ewf-bottom { flex-direction: column; align-items: flex-start; } }

/* ==========================================================================
   SUPPORT PAGE (support.html) — .ewg-help
   ========================================================================== */
.ewg-help { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ewg-help__card { padding: 30px; display: flex; flex-direction: column; }
.ewg-help__card h3 { font-size: 20px; margin-bottom: 8px; }
.ewg-help__card > p { font-size: 14.5px; color: var(--text-2); margin-bottom: 20px; flex-grow: 1; }
.ewg-help__card .ewg-btn { align-self: flex-start; }
.ewg-help__card--main { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px 24px; padding: 32px 36px; border-color: rgba(34, 211, 238, 0.35); background: linear-gradient(135deg, rgba(34, 211, 238, 0.14), var(--glass) 60%, rgba(245, 165, 36, 0.06)); }
.ewg-help__card--main .ewg-icon { grid-row: 1 / span 2; margin: 0; width: 60px; height: 60px; font-size: 22px; }
.ewg-help__card--main h3 { margin: 0; font-size: 22px; }
.ewg-help__card--main > p { grid-column: 2; margin: 0; font-size: 15.5px; max-width: 620px; }
.ewg-help__card--main .ewg-btn { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
.ewg-help__tag { display: inline-block; vertical-align: 3px; margin-left: 8px; font-family: var(--font-head); font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #04212A; background: var(--cyan); padding: 4px 10px; border-radius: 100px; }
.ewg-help__list { margin-top: auto; }
.ewg-help__list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; padding: 9px 0; border-top: 1px solid rgba(148, 197, 255, 0.1); font-size: 14px; }
.ewg-help__list span { color: var(--muted); }
.ewg-help__list a { color: var(--cyan); font-weight: 600; white-space: nowrap; margin-left: auto; }
.ewg-help__list a:hover { color: var(--cyan-2); }
.ewg-help__list em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--amber); margin-left: 4px; }
.ewg-help__checklist { padding: 30px; }
.ewg-help__checklist .ewg-checks { margin-bottom: 18px; }
.ewg-help__checklist .ewg-checks strong { color: var(--text); }
.ewg-help__note { font-size: 13.5px; color: var(--muted); border-left: 3px solid var(--amber); padding-left: 12px; }
@media (max-width: 1080px) { .ewg-help { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px)  { .ewg-help__card--main { display: flex; flex-direction: column; align-items: flex-start; } .ewg-help__card--main .ewg-icon { margin-bottom: 14px; } .ewg-help__card--main > p { margin: 8px 0 20px; } }
@media (max-width: 640px)  { .ewg-help { grid-template-columns: 1fr; } .ewg-help__card { padding: 24px; } }