/* =====================================================================
   Public site skin — original SMM24x7 layer.
   Warm cream canvas, soft colour wash, glass cards, ink pill controls.
   Loaded last on storefront, account, and marketing pages. Layout and
   order flow stay as they are; this file only changes colour, type,
   radius, and surface.
   ===================================================================== */

:root,
html[data-theme="light"] {
  --rp-bg: #ebe8e1;
  --rp-wash-a: #f2d3bd;
  --rp-wash-b: #cfdfcd;
  --rp-wash-c: #f1e4bf;
  --rp-glass: rgba(255, 255, 255, .62);
  --rp-glass-2: rgba(255, 255, 255, .82);
  --rp-solid: #f6f4ef;
  --rp-float: #fdfcf9;
  --rp-ink: #17191a;
  --rp-muted: #5c615c;
  --rp-faint: #6e726d;
  --rp-line: rgba(23, 25, 26, .12);
  --rp-rim: rgba(255, 255, 255, .78);
  --rp-butter: #f2c94c;
  --rp-on-butter: #17191a;
  --rp-pine: #2f5c50;
  --rp-on-pine: #fbf8f2;
  --rp-tomato: #c8431f;
  --rp-on-tomato: #fbf8f2;
  --rp-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 24px 48px -30px rgba(70, 50, 30, .28);
  --rp-font: "Urbanist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --bg: var(--rp-bg);
  --bg-soft: #e4e0d7;
  --surface: var(--rp-float);
  --surface-2: var(--rp-glass-2);
  --text: var(--rp-ink);
  --text-dim: #3a3d3a;
  --muted: var(--rp-muted);
  --text-muted: var(--rp-muted);
  --border: var(--rp-line);
  --border-soft: rgba(23, 25, 26, .08);
  --primary: var(--rp-ink);
  --primary-strong: #000;
  --primary-soft: rgba(23, 25, 26, .06);
  --primary-glow: rgba(23, 25, 26, .18);
  --my-page-bg: var(--rp-bg);
  --my-card: var(--rp-float);
  --my-text: var(--rp-ink);
  --my-muted: var(--rp-muted);
  --my-border: var(--rp-line);
  --my-accent: var(--rp-ink);
  --accent: var(--rp-ink);
  --on-accent: #fbf8f2;
  --on-primary: #fbf8f2;
  --green: var(--rp-pine);
  --success: var(--rp-pine);
  --danger: var(--rp-tomato);
  color-scheme: light;
}

html[data-theme="dark"],
html[data-theme-style="midnight"],
html[data-theme-style="darkside"] {
  --rp-bg: #111412;
  --rp-wash-a: rgba(200, 67, 31, .28);
  --rp-wash-b: rgba(47, 92, 80, .50);
  --rp-wash-c: rgba(242, 201, 76, .10);
  --rp-glass: rgba(255, 255, 255, .06);
  --rp-glass-2: rgba(255, 255, 255, .10);
  --rp-solid: #1c201e;
  --rp-float: #242927;
  --rp-ink: #f1eee8;
  --rp-muted: #b7bbb4;
  --rp-faint: #8d918b;
  --rp-line: rgba(255, 255, 255, .12);
  --rp-rim: rgba(255, 255, 255, .10);
  --rp-butter: #f2c94c;
  --rp-on-butter: #17191a;
  --rp-pine: #8cc7b4;
  --rp-on-pine: #10211c;
  --rp-tomato: #f08a68;
  --rp-on-tomato: #1a0d08;
  --rp-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 24px 48px -30px rgba(0, 0, 0, .7);
  --bg: var(--rp-bg);
  --bg-soft: #1a1e1c;
  --surface: var(--rp-float);
  --text: var(--rp-ink);
  --text-dim: #d7d3cb;
  --muted: var(--rp-muted);
  --text-muted: var(--rp-muted);
  --border: var(--rp-line);
  --primary: var(--rp-ink);
  --primary-strong: #fff;
  --primary-soft: rgba(255, 255, 255, .08);
  --my-page-bg: var(--rp-bg);
  --my-card: var(--rp-float);
  --my-text: var(--rp-ink);
  --my-muted: var(--rp-muted);
  --my-border: var(--rp-line);
  --my-accent: var(--rp-ink);
  --on-accent: #17191a;
  --on-primary: #17191a;
  color-scheme: dark;
}

html body {
  background: var(--rp-bg) !important;
  color: var(--rp-ink) !important;
  font-family: var(--rp-font) !important;
  -webkit-font-smoothing: antialiased;
}
html body button,
html body input,
html body select,
html body textarea {
  font-family: var(--rp-font) !important;
}
html body h1,
html body h2,
html body h3,
html body .hero h1,
html body .brand,
html body .page-title {
  font-family: var(--rp-font) !important;
  letter-spacing: -.025em;
}

/* Colour wash behind every public page. Filter stays on the pseudo only. */
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(closest-side, var(--rp-wash-a), transparent 72%) -12vmax -18vmax / 62vmax 62vmax no-repeat,
    radial-gradient(closest-side, var(--rp-wash-b), transparent 72%) 78vw 68vh / 70vmax 70vmax no-repeat,
    radial-gradient(closest-side, var(--rp-wash-c), transparent 70%) 62vw -12vmax / 46vmax 46vmax no-repeat,
    var(--rp-bg) !important;
  filter: none !important;
  animation: none !important;
}

::selection { background: var(--rp-butter); color: #17191a; }

/* ── Header: open row on the canvas, not a dark capsule ─────────── */
html body .hdr,
html body #smm-site-header,
html body #smm-site-header .smmh-wrap,
html body .mk-header,
html body .smm-site-hdr {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html body #smm-site-header { font-family: var(--rp-font) !important; }
html body #smm-site-header .smmh-bar,
html body #smm-site-header.scrolled .smmh-bar {
  background: var(--rp-glass-2) !important;
  color: var(--rp-ink) !important;
  border: 1px solid var(--rp-rim) !important;
  box-shadow: var(--rp-shadow) !important;
  border-radius: 999px !important;
}
html body #smm-site-header .smmh-links a {
  color: var(--rp-ink) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
}
html body #smm-site-header .smmh-links a:hover {
  background: rgba(23, 25, 26, .06) !important;
  color: var(--rp-ink) !important;
}
html body #smm-site-header .smmh-links a.on {
  background: var(--rp-ink) !important;
  color: var(--rp-on-pine) !important;
}
html[data-theme="dark"] body #smm-site-header .smmh-links a.on,
html[data-theme-style="midnight"] body #smm-site-header .smmh-links a.on,
html[data-theme-style="darkside"] body #smm-site-header .smmh-links a.on {
  background: var(--rp-ink) !important;
  color: #17191a !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: 999px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  min-height: 40px;
  padding: 8px 16px !important;
  white-space: nowrap;
  text-decoration: none !important;
  overflow: visible !important;
}
html body #smm-site-header .smmh-cta.solid {
  background: var(--rp-ink) !important;
  color: #fbf8f2 !important;
  border: 0 !important;
}
html[data-theme="dark"] body #smm-site-header .smmh-cta.solid,
html[data-theme-style="midnight"] body #smm-site-header .smmh-cta.solid,
html[data-theme-style="darkside"] body #smm-site-header .smmh-cta.solid {
  background: #f1eee8 !important;
  color: #17191a !important;
}
html body #smm-site-header .smmh-cta.ghost {
  background: transparent !important;
  color: var(--rp-ink) !important;
  border: 1px solid var(--rp-line) !important;
}

html body .brand,
html body .smmh-logo,
html body a.brand {
  color: var(--rp-ink) !important;
  text-decoration: none !important;
}
html body .brand-mark,
html body .nd-brand-mark {
  background: #17191a !important;
  color: #fbf8f2 !important;
  box-shadow: none !important;
  border-radius: 12px !important;
}
html[data-theme="dark"] body .brand-mark,
html[data-theme="dark"] body .nd-brand-mark,
html[data-theme-style="midnight"] body .brand-mark,
html[data-theme-style="midnight"] body .nd-brand-mark,
html[data-theme-style="darkside"] body .brand-mark,
html[data-theme-style="darkside"] body .nd-brand-mark {
  background: #f1eee8 !important;
  color: #17191a !important;
}
html body .icon-btn,
html body .ham-btn,
html body .nd-close {
  background: var(--rp-glass-2) !important;
  color: var(--rp-ink) !important;
  border: 1px solid var(--rp-rim) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  min-width: 44px;
  min-height: 44px;
}

/* ── Glass 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 {
  background: var(--rp-glass) !important;
  color: var(--rp-ink) !important;
  border: 1px solid var(--rp-rim) !important;
  border-radius: 26px !important;
  box-shadow: var(--rp-shadow) !important;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}
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(--rp-ink) !important;
}
html body .legal-page h2 { color: var(--rp-pine) !important; }
html body .legal-page a { color: var(--rp-pine) !important; }
html body .legal-meta,
html body .legal-page .legal-meta { color: var(--rp-muted) !important; }

@media (max-width: 900px), (hover: none) {
  html body .card,
  html body .svc-card,
  html body .order-form,
  html body .legal-page,
  html body .sseo-card,
  html body .blog-hero,
  html body .svc-only-hero {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--rp-solid) !important;
  }
}

/* ── Hero ────────────────────────────────────────────────────────── */
html body .hero h1,
html body .hero h1 .grad,
html body .pg-title {
  background: none !important;
  -webkit-text-fill-color: unset !important;
  color: var(--rp-ink) !important;
  letter-spacing: -.03em;
  font-weight: 600;
  white-space: normal !important;
  overflow-wrap: break-word;
  max-width: 100%;
}
html body .hero h1 .grad { color: var(--rp-pine) !important; }
html body .hero .sub,
html body .hero p { color: var(--rp-muted) !important; }
html body .hero-mesh { opacity: .28 !important; }
html body .orbit-icon { opacity: .55; }
html body .hero-eyebrow,
html body .live-pill.online {
  background: var(--rp-glass-2) !important;
  color: var(--rp-ink) !important;
  border: 1px solid var(--rp-rim) !important;
  box-shadow: none !important;
  border-radius: 999px !important;
}

/* ── Buttons ─────────────────────────────────────────────────────── */
html body .btn:not(.ghost):not(.danger):not(.red):not(.btn-outline):not(.btn-quiet),
html body .cta-primary,
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;
  box-sizing: border-box;
  background: #17191a !important;
  color: #fbf8f2 !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !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 .cta-primary::after,
html body .btn:not(.ghost):not(.danger):not(.red):not(.btn-outline)::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[data-theme="dark"] body .btn:not(.ghost):not(.danger):not(.red):not(.btn-outline):not(.btn-quiet),
html[data-theme="dark"] body .cta-primary,
html[data-theme="dark"] body .btn-pill.solid,
html[data-theme="dark"] body .gc-btn,
html[data-theme-style="midnight"] body .btn:not(.ghost):not(.danger):not(.red):not(.btn-outline):not(.btn-quiet),
html[data-theme-style="midnight"] body .cta-primary,
html[data-theme-style="midnight"] body .btn-pill.solid,
html[data-theme-style="darkside"] body .btn:not(.ghost):not(.danger):not(.red):not(.btn-outline):not(.btn-quiet),
html[data-theme-style="darkside"] body .cta-primary,
html[data-theme-style="darkside"] body .btn-pill.solid {
  background: #f1eee8 !important;
  color: #17191a !important;
}
html body .btn.ghost,
html body .btn-outline,
html body .cta:not(.cta-primary),
html body .btn-pill:not(.solid) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box;
  background: var(--rp-glass) !important;
  color: var(--rp-ink) !important;
  border: 1px solid var(--rp-line) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  line-height: 1.2 !important;
  min-height: 44px;
  padding: 10px 18px !important;
  text-decoration: none !important;
  white-space: nowrap;
}
html body .btn.danger,
html body .btn.red,
html body button.danger {
  background: var(--rp-tomato) !important;
  color: var(--rp-on-tomato) !important;
  border-radius: 999px !important;
  border: 0 !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(--rp-ink);
  outline-offset: 2px;
}

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(--rp-glass-2) !important;
  color: var(--rp-ink) !important;
  border: 1px solid var(--rp-line) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  min-height: 44px;
}
html body input:focus,
html body select:focus,
html body textarea:focus {
  border-color: var(--rp-ink) !important;
  outline: none;
}

/* ── Account sidebar (/my) ───────────────────────────────────────── */
html:not([data-theme="dark"]) body.with-mybnav,
html:not([data-theme="dark"]) body.with-mybnav.with-mybnav {
  background: var(--rp-bg) !important;
  color: var(--rp-ink) !important;
}
html[data-theme="dark"] body.with-mybnav {
  background: var(--rp-bg) !important;
  color: var(--rp-ink) !important;
}
html:not([data-theme="dark"]) body.with-mybnav .mk-side,
html:not([data-theme="dark"]) body.with-mybnav .mk-header,
html:not([data-theme="dark"]) body[data-skin="premium"].with-mybnav .mk-side,
html:not([data-theme="dark"]) body[data-skin="premium"].with-mybnav .mk-header {
  background: var(--rp-glass-2) !important;
  color: var(--rp-ink) !important;
  border-color: var(--rp-line) !important;
  box-shadow: none !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
html[data-theme="dark"] body.with-mybnav .mk-side,
html[data-theme="dark"] body.with-mybnav .mk-header,
html[data-theme="dark"] body[data-skin="premium"].with-mybnav .mk-side,
html[data-theme="dark"] body[data-skin="premium"].with-mybnav .mk-header {
  background: var(--rp-solid) !important;
  color: var(--rp-ink) !important;
  box-shadow: none !important;
}
html:not([data-theme="dark"]) body.with-mybnav .mks-item { color: var(--rp-muted) !important; }
html:not([data-theme="dark"]) body.with-mybnav .mks-item.active,
html[data-theme="dark"] body.with-mybnav .mks-item.active {
  background: var(--rp-ink) !important;
  color: #17191a !important;
}
html:not([data-theme="dark"]) body.with-mybnav .mks-item.active { color: #fbf8f2 !important; }
html[data-theme-style="midnight"] body.with-mybnav .mks-item.active,
html[data-theme-style="darkside"] body.with-mybnav .mks-item.active {
  background: #f1eee8 !important;
  color: #17191a !important;
}
html body.with-mybnav .mks-item.active::before {
  background: var(--rp-butter) !important;
  box-shadow: none !important;
}

/* ── Mobile dock ─────────────────────────────────────────────────── */
@media (max-width: 760px) {
  html body .card,
  html body .svc-card,
  html body .price-card { overflow-x: auto; }
  html body .my-bnav,
  html body .guest-bnav,
  html body .smm-bnav {
    background: #17191a !important;
    color: #fbf8f2 !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .45) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  html body .my-bnav a,
  html body .guest-bnav a,
  html body .smm-bnav a {
    color: rgba(251, 248, 242, .78) !important;
  }
  html body .my-bnav a.active,
  html body .guest-bnav a.active,
  html body .smm-bnav a.active {
    color: #fbf8f2 !important;
  }
  html body .my-bnav a.active .ic,
  html body .guest-bnav a.active .ic {
    background: var(--rp-butter) !important;
    color: #17191a !important;
    box-shadow: none !important;
    transform: none !important;
  }
}

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