/* =====================================================================
   Public site skin — EthicalSMM-style console look, dark + light.
   Charcoal / cool-grey surfaces, cyan brand accent, Space Grotesk
   headings, IBM Plex Mono labels. Loaded last on storefront, account and
   marketing pages (not the homepage, which carries its own styles).
   Only colour, type, radius and surface change — layout and order flow
   stay as they are. Theme follows html[data-theme] (localStorage "theme").
   ===================================================================== */

:root,
html[data-theme="dark"] {
  --es-bg: #0d0e11;
  --es-bg-2: #111318;
  --es-panel: #15171c;
  --es-panel-2: #1b1e24;
  --es-well: #0f1014;
  --es-line: rgba(255, 255, 255, .08);
  --es-line-2: rgba(255, 255, 255, .14);
  --es-ink: #eceff4;
  --es-ink-2: #b3bac6;
  --es-ink-3: #8a92a0;
  --es-acc: #22d3ee;
  --es-acc-ink: #67e8f9;
  --es-on-acc: #03161b;
  --es-acc-soft: rgba(34, 211, 238, .12);
  --es-acc-line: rgba(34, 211, 238, .35);
  --es-ok: #3dd68c;
  --es-ok-soft: rgba(61, 214, 140, .12);
  --es-warn: #f5b041;
  --es-warn-soft: rgba(245, 176, 65, .12);
  --es-bad: #ff6b6b;
  --es-bad-soft: rgba(255, 107, 107, .12);
  --es-grid: rgba(255, 255, 255, .035);
  --es-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 20px 40px -26px rgba(0, 0, 0, .85);
  --es-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --es-disp: "Space Grotesk", Inter, ui-sans-serif, system-ui, sans-serif;
  --es-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --bg: var(--es-bg);
  --bg-2: var(--es-bg-2);
  --bg-soft: var(--es-bg-2);
  --surface: var(--es-panel);
  --surface-2: var(--es-panel-2);
  --card: var(--es-panel);
  --text: var(--es-ink);
  --text-dim: var(--es-ink-2);
  --muted: var(--es-ink-3);
  --text-muted: var(--es-ink-3);
  --border: var(--es-line-2);
  --border-soft: var(--es-line);
  --primary: var(--es-acc);
  --primary-strong: #06b6d4;
  --primary-hover: #06b6d4;
  --primary-soft: var(--es-acc-soft);
  --primary-glow: rgba(34, 211, 238, .35);
  --on-primary: var(--es-on-acc);
  --accent: var(--es-acc);
  --on-accent: var(--es-on-acc);
  --my-page-bg: var(--es-bg);
  --my-card: var(--es-panel);
  --my-text: var(--es-ink);
  --my-muted: var(--es-ink-3);
  --my-border: var(--es-line-2);
  --my-accent: var(--es-acc);
  --green: var(--es-ok);
  --success: var(--es-ok);
  --danger: var(--es-bad);
  --font-sans: var(--es-font);
  --font-display: var(--es-disp);
  --font-mono: var(--es-mono);
  color-scheme: dark;
}

html[data-theme="light"] {
  --es-bg: #eceef2;
  --es-bg-2: #e4e7ec;
  --es-panel: #ffffff;
  --es-panel-2: #f6f7f9;
  --es-well: #f1f3f6;
  --es-line: rgba(12, 16, 24, .09);
  --es-line-2: rgba(12, 16, 24, .16);
  --es-ink: #0c0f15;
  --es-ink-2: #3b4351;
  --es-ink-3: #5b6474;
  --es-acc: #0891b2;
  --es-acc-ink: #0e7490;
  --es-on-acc: #ffffff;
  --es-acc-soft: rgba(8, 145, 178, .10);
  --es-acc-line: rgba(8, 145, 178, .35);
  --es-ok: #14894f;
  --es-ok-soft: rgba(20, 137, 79, .10);
  --es-warn: #a35f00;
  --es-warn-soft: rgba(217, 119, 6, .12);
  --es-bad: #c62828;
  --es-bad-soft: rgba(198, 40, 40, .10);
  --es-grid: rgba(12, 16, 24, .04);
  --es-shadow: 0 1px 2px rgba(12, 16, 24, .05), 0 14px 30px -22px rgba(12, 16, 24, .3);
  --primary-strong: #0e7490;
  --primary-hover: #0e7490;
  --primary-glow: rgba(8, 145, 178, .25);
  color-scheme: light;
}

/* The older "desk" skin (ethical-skin.css) also loads on this surface.
   Point its tokens at this palette so none of its brown paper leaks through. */
:root,
html[data-theme],
html[data-theme-style] {
  --eth-desk: var(--es-bg);
  --eth-desk-2: var(--es-bg);
  --eth-paper: var(--es-panel);
  --eth-paper-2: var(--es-panel-2);
  --eth-ink: var(--es-ink);
  --eth-ink-2: var(--es-ink-2);
  --eth-ink-3: var(--es-ink-3);
  --eth-edge: var(--es-line-2);
  --eth-edge-soft: var(--es-line);
  --eth-accent: var(--es-acc);
  --eth-on-accent: var(--es-on-acc);
  --eth-ok: var(--es-ok);
  --eth-ok-bg: var(--es-ok-soft);
  --eth-metal: linear-gradient(var(--es-panel-2), var(--es-panel-2));
  --eth-enamel: linear-gradient(var(--es-acc), var(--es-acc));
  --eth-enamel-press: linear-gradient(var(--es-acc), var(--es-acc));
  --eth-acc-edge: var(--es-acc);
  --eth-noise: none;
  --eth-bevel: 0 0 0 transparent;
  --eth-bevel-deep: 0 0 0 transparent;
  --eth-inset: 0 0 0 transparent;
  --eth-font: var(--es-font);
}

/* ── Base ───────────────────────────────────────────────────────── */
html body {
  background: var(--es-bg) !important;
  color: var(--es-ink) !important;
  font-family: var(--es-font) !important;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
html body button,
html body input,
html body select,
html body textarea {
  font-family: var(--es-font) !important;
}
html body h1,
html body h2,
html body h3,
html body .hero h1,
html body .brand,
html body .page-title,
html body .pg-title {
  font-family: var(--es-disp) !important;
  letter-spacing: -.025em;
}
html body code,
html body pre,
html body kbd,
html body .mono {
  font-family: var(--es-mono) !important;
}

/* Faint console grid behind every page. */
html body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  background:
    radial-gradient(900px 420px at 50% -140px, var(--es-acc-soft), transparent 70%),
    linear-gradient(var(--es-grid) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, var(--es-grid) 1px, transparent 1px) 0 0 / 44px 44px,
    var(--es-bg) !important;
  filter: none !important;
  animation: none !important;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 55%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0, #000 55%, transparent 100%);
}
html body::after { display: none !important; }
html body .deco-blob,
html body .hero-mesh,
html body .orbit-icon { opacity: .18 !important; }

::selection { background: var(--es-acc); color: var(--es-on-acc); }

html body a { color: inherit; }
html body p a:not(.btn):not(.cta),
html body .legal-page a { color: var(--es-acc-ink) !important; }

/* ── Header ─────────────────────────────────────────────────────── */
html body .hdr,
html body .mk-header,
html body .smm-site-hdr {
  background: color-mix(in srgb, var(--es-bg) 84%, transparent) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--es-line) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
          backdrop-filter: blur(14px) saturate(140%) !important;
}
html body #smm-site-header,
html body #smm-site-header .smmh-wrap {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
html body #smm-site-header { font-family: var(--es-font) !important; }
html body #smm-site-header .smmh-bar,
html body #smm-site-header.scrolled .smmh-bar {
  background: color-mix(in srgb, var(--es-panel) 90%, transparent) !important;
  color: var(--es-ink) !important;
  border: 1px solid var(--es-line-2) !important;
  box-shadow: var(--es-shadow) !important;
  border-radius: 14px !important;
  -webkit-backdrop-filter: blur(14px) !important;
          backdrop-filter: blur(14px) !important;
}
html body #smm-site-header .smmh-links a {
  color: var(--es-ink-2) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
}
html body #smm-site-header .smmh-links a:hover {
  background: var(--es-panel-2) !important;
  color: var(--es-ink) !important;
}
html body #smm-site-header .smmh-links a.on {
  background: var(--es-acc-soft) !important;
  color: var(--es-acc-ink) !important;
}
html body #smm-site-header .smmh-cta.solid,
html body #smm-site-header .smmh-cta.ghost {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box;
  flex: none;
  width: auto !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  min-height: 40px;
  padding: 8px 15px !important;
  white-space: nowrap;
  text-decoration: none !important;
  overflow: visible !important;
}
html body #smm-site-header .smmh-cta.solid {
  background: var(--es-acc) !important;
  color: var(--es-on-acc) !important;
  border: 0 !important;
}
html body #smm-site-header .smmh-cta.ghost {
  background: var(--es-panel-2) !important;
  color: var(--es-ink) !important;
  border: 1px solid var(--es-line-2) !important;
}
html body .brand,
html body .smmh-logo,
html body a.brand {
  color: var(--es-ink) !important;
  text-decoration: none !important;
}
html body .brand-mark,
html body .nd-brand-mark {
  background: var(--es-acc) !important;
  color: var(--es-on-acc) !important;
  box-shadow: none !important;
  border-radius: 10px !important;
}
html body .icon-btn,
html body .ham-btn,
html body .nd-close,
html body .smmh-burger {
  background: var(--es-panel-2) !important;
  color: var(--es-ink) !important;
  border: 1px solid var(--es-line-2) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  min-width: 40px;
  min-height: 40px;
}
html body .nav-drawer,
html body .smmh-drawer {
  background: var(--es-bg) !important;
  color: var(--es-ink) !important;
  border-color: var(--es-line) !important;
}
html body .nav-drawer a,
html body .smmh-drawer a { color: var(--es-ink) !important; }

/* ── Surfaces ───────────────────────────────────────────────────── */
html body .card,
html body .svc-card,
html body .plat-card,
html body .how-card,
html body .feat-card,
html body .price,
html body .price-card,
html body .faq-item,
html body .test,
html body .why,
html body .step,
html body .stat,
html body .order-form,
html body .gc-card,
html body .blog-card,
html body .pkg-card,
html body .sseo-card,
html body .legal-page,
html body main.legal-page,
html body .login-wrap.card,
html body .hero-panel,
html body .svc-only-hero,
html body .blog-hero,
html body .toc,
html body .endpoint {
  background: var(--es-panel) !important;
  color: var(--es-ink) !important;
  border: 1px solid var(--es-line-2) !important;
  border-radius: 14px !important;
  box-shadow: var(--es-shadow) !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}
html body .card:hover,
html body .svc-card:hover,
html body .blog-card:hover,
html body .plat-card:hover,
html body .pkg-card:hover {
  border-color: var(--es-acc-line) !important;
  transform: none !important;
}
html body .legal-page h1,
html body .legal-page h2,
html body .legal-page p,
html body .legal-page li,
html body .legal-page strong {
  background: none !important;
  -webkit-text-fill-color: unset !important;
  color: var(--es-ink) !important;
}
html body .legal-page p,
html body .legal-page li { color: var(--es-ink-2) !important; }
html body .legal-page h2 { color: var(--es-ink) !important; }
html body .legal-meta,
html body .legal-page .legal-meta {
  color: var(--es-ink-3) !important;
  font-family: var(--es-mono) !important;
  font-size: 12px !important;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Muted text everywhere reads from the skin. */
html body .muted,
html body .sub,
html body .hint,
html body .lead,
html body small.muted { color: var(--es-ink-3) !important; }

/* ── Hero / page titles ─────────────────────────────────────────── */
html body .hero h1,
html body .hero h1 .grad,
html body .pg-title {
  background: none !important;
  -webkit-text-fill-color: unset !important;
  color: var(--es-ink) !important;
  letter-spacing: -.03em;
  font-weight: 700;
  white-space: normal !important;
  overflow-wrap: break-word;
  max-width: 100%;
}
html body .hero h1 .grad { color: var(--es-acc-ink) !important; }
html body .hero .sub,
html body .hero p { color: var(--es-ink-2) !important; }
html body .hero-eyebrow,
html body .live-pill.online,
html body .pill,
html body .eyebrow {
  background: var(--es-panel) !important;
  color: var(--es-acc-ink) !important;
  border: 1px solid var(--es-line-2) !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  font-family: var(--es-mono) !important;
  font-size: 11.5px !important;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ── Buttons ────────────────────────────────────────────────────── */
html body .btn:not(.ghost):not(.danger):not(.red):not(.btn-outline):not(.btn-quiet),
html body .cta-primary,
html body .cta,
html body .btn-pill.solid,
html body .gc-btn,
html body button.primary,
html body .pwa-install-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  box-sizing: border-box;
  background: var(--es-acc) !important;
  color: var(--es-on-acc) !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 24px -14px var(--es-acc), inset 0 1px 0 rgba(255, 255, 255, .22) !important;
  text-shadow: none !important;
  font-weight: 600;
  line-height: 1.2 !important;
  min-height: 44px;
  padding: 10px 18px !important;
  text-decoration: none !important;
  white-space: nowrap;
}
html body .btn:not(.ghost):not(.danger):not(.red):not(.btn-outline):not(.btn-quiet):hover,
html body .cta-primary:hover,
html body button.primary:hover { filter: brightness(1.06); }
html body .cta-primary::after,
html body .btn::after,
html body .pwa-install-btn::after,
html body .gc-btn::after,
html body .mks-promo-btn::after {
  content: none !important;
  display: none !important;
}
html body .btn.ghost,
html body .btn-outline,
html body .btn-quiet,
html body .cta:not(.cta-primary).ghost,
html body .btn-pill:not(.solid) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box;
  background: var(--es-panel-2) !important;
  color: var(--es-ink) !important;
  border: 1px solid var(--es-line-2) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  line-height: 1.2 !important;
  min-height: 44px;
  padding: 10px 16px !important;
  text-decoration: none !important;
  white-space: nowrap;
}
html body .btn.ghost:hover,
html body .btn-pill:not(.solid):hover { border-color: var(--es-acc-line) !important; }
html body .btn.danger,
html body .btn.red,
html body button.danger {
  background: var(--es-bad-soft) !important;
  color: var(--es-bad) !important;
  border: 1px solid color-mix(in srgb, var(--es-bad) 40%, transparent) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
html body a:focus-visible,
html body button:focus-visible,
html body input:focus-visible,
html body select:focus-visible,
html body textarea:focus-visible {
  outline: 2px solid var(--es-acc);
  outline-offset: 2px;
}

/* ── Forms ──────────────────────────────────────────────────────── */
html body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
html body select,
html body textarea {
  background: var(--es-well) !important;
  color: var(--es-ink) !important;
  border: 1px solid var(--es-line-2) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  min-height: 44px;
}
html body input::placeholder,
html body textarea::placeholder { color: var(--es-ink-3) !important; opacity: 1; }
html body input:focus,
html body select:focus,
html body textarea:focus {
  border-color: var(--es-acc-line) !important;
  box-shadow: 0 0 0 3px var(--es-acc-soft) !important;
  outline: none;
}
html body label { color: var(--es-ink-2); }
html body input[type="checkbox"],
html body input[type="radio"] { accent-color: var(--es-acc); }

/* ── Tables ─────────────────────────────────────────────────────── */
html body table { border-collapse: collapse; color: var(--es-ink); }
html body table th {
  background: var(--es-panel-2) !important;
  color: var(--es-ink-3) !important;
  font-family: var(--es-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--es-line-2) !important;
}
html body table td { border-bottom: 1px solid var(--es-line) !important; color: var(--es-ink); }
html body table tbody tr:hover td { background: var(--es-panel-2); }

/* Code blocks (api-docs and blog). */
html body pre {
  background: var(--es-well) !important;
  color: var(--es-ink-2) !important;
  border: 1px solid var(--es-line-2) !important;
  border-radius: 12px !important;
}
html body :not(pre) > code {
  background: var(--es-panel-2) !important;
  color: var(--es-acc-ink) !important;
  border: 1px solid var(--es-line);
  border-radius: 6px;
}

/* ── Account shell (/my) ───────────────────────────────────────── */
html body.with-mybnav,
html body.with-mybnav.with-mybnav {
  background: var(--es-bg) !important;
  color: var(--es-ink) !important;
}
html body.with-mybnav .mk-side,
html body.with-mybnav .mk-header,
html body[data-skin="premium"].with-mybnav .mk-side,
html body[data-skin="premium"].with-mybnav .mk-header {
  background: var(--es-panel) !important;
  color: var(--es-ink) !important;
  border-color: var(--es-line) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}
html body.with-mybnav .mks-item {
  color: var(--es-ink-2) !important;
  border-radius: 9px !important;
}
html body.with-mybnav .mks-item:hover {
  background: var(--es-panel-2) !important;
  color: var(--es-ink) !important;
}
html body.with-mybnav .mks-item.active {
  background: var(--es-acc-soft) !important;
  color: var(--es-acc-ink) !important;
  box-shadow: inset 3px 0 0 var(--es-acc) !important;
}
html body.with-mybnav .mks-item.active::before {
  background: var(--es-acc) !important;
  box-shadow: none !important;
}
html body .theme-seg,
html body .theme-toggle {
  background: var(--es-panel-2) !important;
  color: var(--es-ink) !important;
  border: 1px solid var(--es-line-2) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

/* Status pills (orders tables). */
html body .badge,
html body .status,
html body .st-badge {
  border-radius: 6px !important;
  font-family: var(--es-mono) !important;
  font-size: 11px !important;
  letter-spacing: .06em;
}

/* ── Mobile ─────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  html body .card,
  html body .svc-card,
  html body .price-card { overflow-x: auto; }
  html body table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  html body .my-bnav,
  html body .guest-bnav,
  html body .smm-bnav {
    background: color-mix(in srgb, var(--es-panel) 94%, transparent) !important;
    color: var(--es-ink) !important;
    border: 1px solid var(--es-line-2) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .55) !important;
    -webkit-backdrop-filter: blur(14px) !important;
            backdrop-filter: blur(14px) !important;
  }
  html body .my-bnav a,
  html body .guest-bnav a,
  html body .smm-bnav a { color: var(--es-ink-3) !important; }
  html body .my-bnav a.active,
  html body .guest-bnav a.active,
  html body .smm-bnav a.active { color: var(--es-acc-ink) !important; }
  html body .my-bnav a.active .ic,
  html body .guest-bnav a.active .ic {
    background: var(--es-acc-soft) !important;
    color: var(--es-acc-ink) !important;
    box-shadow: none !important;
    transform: none !important;
  }
  html body img,
  html body video,
  html body iframe { max-width: 100%; }
}

/* Floating theme switch added by esm-theme.js on pages without one. */
.esm-tsw {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: none;
  width: 56px;
  height: 36px;
  padding: 3px;
  border-radius: 10px;
  background: var(--es-panel-2);
  border: 1px solid var(--es-line-2);
  cursor: pointer;
}
.esm-tsw i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--es-bg);
  border: 1px solid var(--es-line-2);
  transition: transform .2s ease;
}
html[data-theme="light"] .esm-tsw i { transform: translateX(18px); background: #fff; }
.esm-tsw svg { width: 15px; height: 15px; }
.esm-tsw .sun { display: none; color: #d97706; }
.esm-tsw .moon { color: var(--es-acc); }
html[data-theme="light"] .esm-tsw .sun { display: block; }
html[data-theme="light"] .esm-tsw .moon { display: none; }
.esm-tsw.float {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9990;
  box-shadow: var(--es-shadow);
}

@media (prefers-reduced-motion: reduce) {
  html body .card,
  html body .btn,
  .esm-tsw i { animation: none !important; transition: none !important; }
}