/*!
 * ============================================================
 * GOJI.MY  goji-main.css  v2.0.0
 * ============================================================
 * LOAD ORDER:
 *   Bootstrap 5.3 CSS
 *   Bootstrap Icons
 *   Google Fonts (Plus Jakarta Sans, DM Sans)
 *   goji-framework.css   ← design system (34 sections, 609 classes)
 *   goji-main.css        ← THIS FILE
 *   [page <style>]       ← page-specific classes only
 *   Bootstrap 5.3 JS     defer
 *   goji-main.js         defer
 *
 * ROLE OF THIS FILE:
 *   1. Shorthand token bridge — shorthand aliases all pages use
 *      (--gs-fd, --gs-fb, --gs-foc, --gs-nh, etc.) mapped to
 *      the longhand tokens defined in goji-framework.css.
 *   2. Shared components — classes used across 2+ pages that
 *      are not in goji-framework.css.
 *   3. Canonical drawer system — gs-drawer-* replacing the
 *      deprecated gs-mob-drawer-* aliases.
 *   4. Dark mode overrides for components with hard-coded values.
 *
 * TABLE OF CONTENTS
 * ─────────────────
 * § 01  SHORTHAND TOKEN BRIDGE
 * § 02  NAVBAR — sub-components & inline search
 * § 03  MOBILE DRAWER + BACKDROP (canonical gs-drawer-* ids)
 * § 04  BREADCRUMB BAR
 * § 05  FOOTER — sub-components
 * § 06  SECTION PRIMITIVES
 * § 07  BADGE COLOUR VARIANTS
 * § 08  FORM FIELD HELPERS
 * § 09  OTP + PASSWORD COMPONENTS
 * § 10  STAT / KPI CARDS
 * § 11  DASHBOARD NAV HELPERS
 * § 12  TABLE WRAPPER
 * § 13  TOGGLE (UI switch)
 * § 14  PRICING TOGGLE
 * § 15  PRICING CARDS
 * § 16  FAQ ACCORDION
 * § 17  BLOG CARD BODY
 * § 18  NEWSLETTER SECTION
 * § 19  SKELETON LOADER
 * § 20  AUTH PAGE SHELL
 * § 21  SEARCH OVERLAY
 * § 22  PAGINATION
 * § 23  VIEW TOGGLE
 * § 24  DARK SECTION (about, pricing)
 * § 25  DARK MODE OVERRIDES
 * § 26  RESPONSIVE HELPERS
 * § 27  REDUCED MOTION
 * § 28  PHASE 1 — GLOBAL UI ENHANCEMENTS (typography, spacing, accessibility)
 * ============================================================ */


/* ============================================================
 * § 01 · SHORTHAND TOKEN BRIDGE
 *
 * Every page uses these shorthand aliases. This is the ONLY
 * :root block in this file. No other section defines custom
 * properties.
 *
 * Mappings verified against live page usage audit (270 multi-
 * page classes, 32 HTML files):
 *
 *   --gs-fd    → --gs-font-display
 *   --gs-fb    → --gs-font-body
 *   --gs-foc   → --gs-focus-ring
 *   --gs-nh    → --gs-navbar-height
 *   --gs-sb    → --gs-sidebar-width
 *   --gs-sb-col → --gs-sidebar-collapsed
 *   --gs-rsm   → --gs-radius-sm
 *   --gs-rmd   → --gs-radius-md
 *   --gs-rlg   → --gs-radius-lg
 *   --gs-rxl   → --gs-radius-xl
 *   --gs-r2xl  → --gs-radius-2xl
 *   --gs-rf    → --gs-radius-full
 *   --gs-sf0–3 → --gs-surface-0 through -3
 *   --gs-bg0–2 → --gs-bg-base / -subtle / -muted
 *   --gs-bd0–2 → --gs-border-default / -subtle / -strong
 *   --gs-tx0–2 → --gs-text-primary / -secondary / -tertiary
 *   --gs-sh*   → --gs-shadow-*
 *   --gs-shbtn → --gs-shadow-primary
 *   --gs-cp    → --gs-color-primary (+ variants)
 *   --gs-cs    → --gs-color-secondary (+ variants)
 *   --gs-ct    → --gs-color-tertiary (+ variants)
 *   --gs-error-bg / -success-bg / -warning-bg / -info-bg
 *              → status background aliases
 * ============================================================ */

:root {
  /* Typography */
  --gs-fd:  var(--gs-font-display);
  --gs-fb:  var(--gs-font-body);

  /* Focus ring */
  --gs-foc: var(--gs-focus-ring);

  /* Layout */
  --gs-nh:     var(--gs-navbar-height);
  --gs-sb:     var(--gs-sidebar-width);
  --gs-sb-col: var(--gs-sidebar-collapsed);

  /* Radius */
  --gs-rsm:  var(--gs-radius-sm);
  --gs-rmd:  var(--gs-radius-md);
  --gs-rlg:  var(--gs-radius-lg);
  --gs-rxl:  var(--gs-radius-xl);
  --gs-r2xl: var(--gs-radius-2xl);
  --gs-rf:   var(--gs-radius-full);

  /* Surfaces */
  --gs-sf0: var(--gs-surface-0);
  --gs-sf1: var(--gs-surface-1);
  --gs-sf2: var(--gs-surface-2);
  --gs-sf3: var(--gs-surface-3);

  /* Backgrounds */
  --gs-bg0: var(--gs-bg-base);
  --gs-bg1: var(--gs-bg-subtle);
  --gs-bg2: var(--gs-bg-muted);

  /* Borders */
  --gs-bd0: var(--gs-border-default);
  --gs-bd1: var(--gs-border-subtle);
  --gs-bd2: var(--gs-border-strong);
  --gs-border: var(--gs-border-default);   /* theme-aware alias used widely in dashboard CSS (flips in dark) */

  /* Text */
  --gs-tx0: var(--gs-text-primary);
  --gs-tx1: var(--gs-text-secondary);
  --gs-tx2: var(--gs-text-tertiary);  

  /* Shadows */
  --gs-shsm:  var(--gs-shadow-sm);
  --gs-shmd:  var(--gs-shadow-md);
  --gs-shlg:  var(--gs-shadow-lg);
  --gs-shxl:  var(--gs-shadow-xl);
  --gs-shbtn: var(--gs-shadow-primary);

  /* ⚠ THE BRAND SHORTCUTS ARE DEFINED IN goji-framework.css, PER THEME — do not re-alias them
     here. They used to be re-declared from their own long-form twins:
         --gs-cp-t: var(--gs-color-primary-text);   <- which is itself var(--gs-cp-t)
     a cycle, and a cyclic custom property is invalid at computed-value time — so the token
     resolved to NOTHING and every rule using it was silently dropped. --gs-cp-h, --gs-cp-m,
     --gs-cp-t and --gs-ct were dead site-wide (--gs-cp-t alone: 102 uses, 91 without a
     fallback). The others only worked because a literal further down this file broke their
     loop — which also pinned them to light-mode values in dark mode. */

  --gs-cs-h: var(--gs-color-secondary-hover);
  --gs-cs-s: var(--gs-color-secondary-subtle);

  --gs-ct-h: var(--gs-color-tertiary-hover);
  --gs-ct-s: var(--gs-color-tertiary-subtle);

  /* ── Fill-ins for tokens referenced but never defined (audit) ── */
  /* secondary/tertiary hover+subtle (the -hover/-subtle aliases above pointed here) */
  --gs-color-secondary-hover:  var(--gs-green-700);
  --gs-color-secondary-subtle: var(--gs-green-100);
  --gs-color-tertiary-hover:   var(--gs-blue-600);
  --gs-color-tertiary-subtle:  var(--gs-blue-100);
  /* base status colours (only -bg/-border/-icon/-text variants existed) */
  --gs-status-error:   var(--gs-status-error-icon);
  --gs-status-success: var(--gs-status-success-icon);
  /* misc one-off tokens used without a definition */
  --gs-blue-300: #93C5FD;
  --gs-rxs:      var(--gs-radius-xs);
  --gs-sh-sm:    var(--gs-shadow-sm);
  --gs-topbar-real: 0px;   /* default; overridden at runtime by the topbar JS */
  --gs-space-3_5: 0.875rem;          /* between space-3 (.75rem) and space-4 (1rem) */
  --toast-duration: 4s;              /* default; per-toast value set by JS */

  /* Status background aliases */
  --gs-error-bg:   var(--gs-status-error-bg);
  --gs-success-bg: var(--gs-status-success-bg);
  --gs-warning-bg: var(--gs-status-warning-bg);
  --gs-info-bg:    var(--gs-status-info-bg);

  /* Primitive colour additions not in framework */
  --gs-red-100:   #FEE2E2;
  --gs-red-600:   #DC2626;
  --gs-yellow-50: #FFFBEB;
  --gs-green-200: #BBF7D0;

  /* Nav button size token (matches layout.php inline style="height:36px;padding:0 1rem") */
  --gs-btn-height-nav: 2.25rem;   /* = 36px = gs-btn-sm height */
  --gs-btn-pad-nav:    0 1rem;

  /* Phase 1 shorthand shadow additions */
  --gs-sh2xl: var(--gs-shadow-2xl);
  /* (Removed: --gs-cs / --gs-cp-s / --gs-cp-b literals. They existed to break the alias cycle
     above, and because this :root is not theme-scoped they also overrode the framework's DARK
     values — pinning the subtle purple and the green to their light-mode constants. With the
     cycle gone the framework's per-theme definitions apply again, in both themes.) */
}


/* ============================================================
 * § 02 · NAVBAR — sub-components & inline search
 * Used across all 30+ public pages.
 * ============================================================ */

/* Inner flex row */
.gs-nav-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 100%;
}

/* Brand lockup */
.gs-brand {
  display: flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  flex-shrink: 0;
}
.gs-brand:focus-visible {
  outline: 2px solid var(--gs-cp);
  border-radius: var(--gs-rmd);
  outline-offset: 3px;
}
.gs-brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #5B21B6, #3D8B37);
  display: flex;
  align-items: center;
  justify-content: center;
}
.gs-brand-mark svg { width: 20px; height: 20px; }
.gs-brand-name {
  font-family: var(--gs-fd);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--gs-tx0);
  letter-spacing: -.025em;
  line-height: 1;
}
.gs-brand-name .dot { color: var(--gs-cs); }

/* Nav link list */
.gs-nav-links {
  display: flex;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
  height: var(--gs-nh);
}
.gs-nav-links li { display: flex; align-items: stretch; }

/* "HOT" pill badge on Deals nav item */
.gs-nav-pill {
  display: inline-flex;
  align-items: center;
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: var(--gs-rf);
  background: var(--gs-cp-m);
  color: var(--gs-cp-t);
  margin-left: .25rem;
  line-height: 1.4;
}

/* Desktop inline search bar */
.gs-nav-search {
  flex: 1;
  max-width: 26rem;
  position: relative;
}
.gs-nav-search-ico {
  position: absolute;
  left: .875rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gs-tx2);
  font-size: .875rem;
  pointer-events: none;
  z-index: 1;
}
.gs-nav-search-inp {
  width: 100%;
  height: 40px;
  background: var(--gs-bg2);
  border: 1.5px solid var(--gs-bd0);
  border-radius: var(--gs-rf);
  padding: 0 1rem 0 2.625rem;
  font-family: var(--gs-fb);
  font-size: .875rem;
  color: var(--gs-tx0);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.gs-nav-search-inp::placeholder { color: var(--gs-tx2); }
.gs-nav-search-inp:focus {
  border-color: var(--gs-cp);
  box-shadow: var(--gs-foc);
  background: var(--gs-sf0);
}

/* Actions cluster (right side) */
.gs-nav-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-left: auto;
  flex-shrink: 0;
}

/* Vertical separator */
.gs-nav-sep {
  width: 1px;
  height: 20px;
  background: var(--gs-bd0);
  flex-shrink: 0;
}

/* Dashboard nav sub-parts */
.gs-nav-section {
  /* These four were inline on the element. Moved here because an inline `display` can never be
     overridden by the `display:none` in the media query below — keep them out of the markup. */
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  gap: 1px;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
  flex-shrink: 0;
}
/* Mobile: keep only the logo in the header — hide the duplicate brand-name/"Business Workspace" text + its separator. */
@media (max-width: 991.98px) {
  .gs-nav-sep,
  .gs-nav-section { display: none; }
}
.gs-nav-right {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-left: auto;
  flex-shrink: 0;
}

/* Mobile hamburger — old pages; kept for backward compat */
.gs-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: 1px solid var(--gs-bd1);
  border-radius: var(--gs-rmd);
  cursor: pointer;
  color: var(--gs-tx1);
  font-size: 1.25rem;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.gs-hamburger:hover { background: var(--gs-bg2); color: var(--gs-tx0); }
.gs-hamburger:focus-visible { outline: none; box-shadow: var(--gs-foc); }

/* Canonical hamburger (gs-burger) — new pages */
.gs-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--gs-bd1);
  border-radius: var(--gs-rmd);
  background: none;
  cursor: pointer;
  padding: .5rem;
  flex-shrink: 0;
  color: var(--gs-tx1);
  font-size: 1.25rem;
  transition: background .15s, color .15s;
}
.gs-burger:hover { background: var(--gs-bg2); color: var(--gs-tx0); }
.gs-burger:focus-visible { outline: none; box-shadow: var(--gs-foc); }

/* Dashboard mobile menu button */
.gs-mobile-menu-btn {
  display: none;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--gs-bd1);
  border-radius: var(--gs-rmd);
  color: var(--gs-tx1);
  cursor: pointer;
  font-size: 1.125rem;
  transition: background .15s, color .15s;
}
.gs-mobile-menu-btn:hover { background: var(--gs-bg2); color: var(--gs-tx0); }
.gs-mobile-menu-btn:focus-visible { outline: none; box-shadow: var(--gs-foc); }


/* ============================================================
 * § 03 · MOBILE DRAWER + BACKDROP
 *
 * Canonical IDs (enforced from search.html build forward):
 *   id="gs-drawer"        → was id="gs-mob-drawer"
 *   id="gs-burger"        → was id="gs-hamburger"
 *   class="gs-drawer"     → was class="gs-mob-drawer"
 *
 * JS contract: drawerOpen() / drawerClose() / drawerToggle()
 *   in goji-main.js MobileMenu module binds to #gs-drawer,
 *   #gs-backdrop, #gs-burger.
 *
 * Both the canonical classes AND the deprecated gs-mob-drawer-*
 * aliases are defined here so older pages (404, new, top-rated,
 * trending) continue to work until they are migrated.
 * ============================================================ */

/* ── Canonical drawer ── */
.gs-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 97%;
  background: var(--gs-sf0);
  /* Keep paired with .gs-backdrop (1080) — they are one component. Anything landing between the
     two floats over the dimmed page while the drawer is open (that is what 700/690 caused: the
     domain reminder at 1070 sat above the backdrop and under the drawer). */
  z-index: 1081;
  box-shadow: 2px 0 24px rgba(0, 0, 0, .18);
  transform: translateX(-110%);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.gs-drawer.open { transform: translateX(0); }

.gs-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.125rem;
  height: var(--gs-nh);
  border-bottom: 1px solid var(--gs-bd0);
  flex-shrink: 0;
}
.gs-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: .75rem .875rem;
  scrollbar-width: thin;
  scrollbar-color: var(--gs-bd0) transparent;
}
.gs-drawer-footer {
  border-top: 1px solid var(--gs-bd0);
  padding: .875rem;
  display: flex;
  gap: .625rem;
  flex-shrink: 0;
}
.gs-drawer-footer .gs-btn { flex: 1; justify-content: center; }
/* Signed in, this footer is three flex:1 buttons (profile · Dashboard · Log Out) sharing a phone's
   width — ~111px each, of which the framework's padding-inline:1rem eats 32px. Drop it here so the
   avatar + first name actually fit. SCOPED ON PURPOSE: setting it on .gs-btn-sm globally was
   measured to shrink content-sized buttons elsewhere by 32px and leave their labels 0.8px from the
   border (tool page: View plans, Choose Basic/Professional/Business). Height is unaffected either
   way — it comes from `height`, not padding — so the tap target stays 36px. */
@media (max-width: 767.98px) {
  .gs-drawer-footer .gs-btn-sm { padding: 0; }
}

/* Section label above a group of links */
.gs-drawer-section-label {
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gs-tx2);
  padding: .75rem .5rem .25rem;
  display: block;
}

/* Navigation link inside drawer */
.gs-drawer-link {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .625rem .875rem;
  border-radius: var(--gs-rmd);
  font-size: .9375rem;
  font-weight: 500;
  color: var(--gs-tx1);
  text-decoration: none;
  transition: background .12s, color .12s;
}
.gs-drawer-link:hover,
.gs-drawer-link.active {
  background: var(--gs-cp-s);
  color: var(--gs-cp-t);
  text-decoration: none;
}
.gs-drawer-link i {
  font-size: 1rem;
  width: 1.125rem;
  text-align: center;
  flex-shrink: 0;
  color: var(--gs-purple-800);
}
.gs-drawer-link:hover i,
.gs-drawer-link.active i { color: var(--gs-cp); }

/* Horizontal separator */
.gs-drawer-sep {
  height: 1px;
  background: var(--gs-bd0);
  margin: .625rem 0;
}

/* Drawer search bar */
.gs-drawer-search { position: relative; margin-bottom: 1.25rem; }
.gs-drawer-search-ico {
  position: absolute;
  left: .875rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gs-tx2);
  font-size: .875rem;
  pointer-events: none;
}
.gs-drawer-search-inp {
  width: 100%;
  height: 44px;
  background: var(--gs-bg2);
  border: 1.5px solid var(--gs-bd0);
  border-radius: var(--gs-rf);
  padding: 0 1rem 0 2.625rem;
  font-family: var(--gs-fb);
  font-size: .9375rem;
  color: var(--gs-tx0);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.gs-drawer-search-inp::placeholder { color: var(--gs-tx2); }
.gs-drawer-search-inp:focus {
  border-color: var(--gs-cp);
  box-shadow: var(--gs-foc);
}

/* ── Deprecated aliases (404, new, top-rated, trending) ── */
/* These mirror the canonical drawer so old pages render correctly
   until they are migrated to id="gs-drawer". */
.gs-mob-drawer {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: min(80vw, 400px);
  background: var(--gs-sf0);
  z-index: 700;
  box-shadow: 2px 0 24px rgba(0, 0, 0, .18);
  transform: translateX(-110%);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.gs-mob-drawer.open { transform: translateX(0); }

.gs-mob-drawer-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.125rem;
  height: var(--gs-nh);
  border-bottom: 1px solid var(--gs-bd0);
  flex-shrink: 0;
}
.gs-mob-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: .75rem .875rem;
  scrollbar-width: thin;
  scrollbar-color: var(--gs-bd0) transparent;
}
.gs-mob-drawer-footer {
  border-top: 1px solid var(--gs-bd0);
  padding: .875rem;
  display: flex;
  gap: .625rem;
  flex-shrink: 0;
}
.gs-mob-drawer-footer .gs-btn { flex: 1; justify-content: center; }
.gs-mob-drawer-section { margin-bottom: 1rem; }
.gs-mob-drawer-label {
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--gs-tx2);
  padding: .375rem .5rem;
  display: block;
}
.gs-mob-drawer-link {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .625rem .75rem;
  border-radius: var(--gs-rmd);
  font-size: .9375rem;
  font-weight: 500;
  color: var(--gs-tx1);
  text-decoration: none;
  transition: background .12s, color .12s;
}
.gs-mob-drawer-link:hover,
.gs-mob-drawer-link.active {
  background: var(--gs-cp-s);
  color: var(--gs-cp-t);
  text-decoration: none;
}
.gs-mob-drawer-link i {
  font-size: 1.125rem;
  width: 1.25rem;
  text-align: center;
  flex-shrink: 0;
  color: var(--gs-tx2);
}
.gs-mob-drawer-link:hover i,
.gs-mob-drawer-link.active i { color: var(--gs-cp); }
.gs-mob-drawer-sep {
  height: 1px;
  background: var(--gs-bd0);
  margin: .5rem 0;
}
/* Legacy search inside old drawer */
.gs-drawer-search-icon {
  position: absolute;
  left: .75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gs-tx2);
  pointer-events: none;
  font-size: 1rem;
}
.gs-drawer-search-input {
  width: 100%;
  height: 44px;
  padding: 0 1rem 0 2.5rem;
  border: 1.5px solid var(--gs-bd1);
  border-radius: var(--gs-rf);
  background: var(--gs-bg1);
  font-family: var(--gs-fb);
  font-size: .9375rem;
  color: var(--gs-tx0);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.gs-drawer-search-input::placeholder { color: var(--gs-tx2); }
.gs-drawer-search-input:focus {
  border-color: var(--gs-cp);
  box-shadow: var(--gs-foc);
}

/* Backdrop — shared by both drawer variants */
.gs-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .48);
  /* Moved 690 → 1080 with .gs-drawer (1081). Left behind, it would have dimmed nothing above 690:
     the search overlay (800), review modal (900) and domain reminder (1070) would all have sat on
     top of the dim while the drawer covered them. Keep these two adjacent. */
  z-index: 1080;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.gs-backdrop.active { opacity: 1; pointer-events: auto; }


/* ============================================================
 * § 04 · BREADCRUMB BAR
 * Used on 14+ pages: blog, category, compare, contact,
 * deals, new, pricing, tool-listing, top-rated, trending, etc.
 * ============================================================ */

.gs-breadcrumb-bar {
  border-bottom: 1px solid var(--gs-bd0);
  background: var(--gs-bg1);
  padding: .625rem 0;
}
.gs-bc-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .375rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .8125rem;
  color: var(--gs-tx2);
}
.gs-bc-list li { display: flex; align-items: center; gap: .375rem; }
.gs-bc-list a { color: var(--gs-tx2); transition: color .15s; }
.gs-bc-list a:hover { color: var(--gs-cp); }
.gs-bc-list .sep { color: var(--gs-bd2); font-size: .625rem; }
.gs-bc-list .current { color: var(--gs-tx1); font-weight: 500; }


/* ============================================================
 * § 05 · FOOTER — sub-components
 * Complements .gs-footer in goji-framework.css.
 * Present on all public pages.
 * ============================================================ */

.gs-footer-brand {
  display: flex;
  align-items: center;
  gap: .625rem;
  margin-bottom: 1rem;
  text-decoration: none;
}
.gs-footer-mark {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #5B21B6, #3D8B37);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.gs-footer-mark svg { width: 18px; height: 18px; }
.gs-footer-brand-name {
  font-family: var(--gs-fd);
  font-size: 1.125rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.025em;
  line-height: 1;
  text-decoration: none;
}
.gs-footer-brand-name .dot { color: #4ADE80; }

.gs-footer-tagline {
  font-size: .875rem;
  color: rgba(255, 255, 255, .62)   /* .45 measured 4.49 against the 4.5 AA line — the footer is always dark, so it was under in BOTH themes */;
  line-height: 1.65;
  max-width: 280px;
  margin-bottom: 1.5rem;
}
.gs-footer-socials { display: flex; gap: .5rem; flex-wrap: wrap; }
.gs-footer-soc {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .06);
  border-radius: var(--gs-rmd);
  color: #9CA3AF;
  font-size: 1rem;
  transition: background .15s, color .15s;
  text-decoration: none;
}
.gs-footer-soc:hover { background: #5B21B6; color: #fff; text-decoration: none; }
.gs-footer-soc:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(167, 139, 250, .45); }

.gs-footer-col-title {
  font-family: var(--gs-fd);
  font-size: .875rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 1rem;
}
.gs-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.gs-footer-links a { font-size: .875rem; color: #9CA3AF; text-decoration: none; transition: color .15s; }
.gs-footer-links a:hover { color: #fff; }

.gs-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .06);
  padding: 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .875rem;
}
.gs-footer-copy { font-size: .75rem; color: #6B7280; line-height: 1.5; }
.gs-footer-copy a { color: #6B7280; text-decoration: none; transition: color .15s; }
.gs-footer-copy a:hover { color: #9CA3AF; }
.gs-footer-legal {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem;
}
.gs-footer-legal a { font-size: .75rem; color: #6B7280; text-decoration: none; transition: color .15s; }
.gs-footer-legal a:hover { color: #9CA3AF; }


/* ============================================================
 * § 06 · SECTION PRIMITIVES
 * Base spacing and typography used on about, blog, pricing,
 * contact, goji-lower-sections, goji-sections.
 * ============================================================ */

.gs-sec {
  padding: 5rem 0;
  background: var(--gs-bg0);
}
.gs-sec-alt { background: var(--gs-bg1); }
.gs-sec-dark { background: #0a0d18; }
.gs-sec-hdr  { margin-bottom: 3rem; }
.gs-sec-h2 {
  font-family: var(--gs-fd);
  font-size: clamp(1.875rem, 3.5vw, 2.625rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.15;
  color: var(--gs-tx0);
  margin-bottom: .75rem;
}
.gs-sec-sub {
  font-size: 1.0625rem;
  color: var(--gs-tx1);
  line-height: 1.65;
}
.gs-sec-sub-center { text-align: center; }

/* Section eyebrow label */
.gs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gs-cp-t);
  background: var(--gs-cp-s);
  border: 1px solid var(--gs-cp-b);
  border-radius: var(--gs-rf);
  padding: .25rem .875rem;
  margin-bottom: .875rem;
}
[data-theme="dark"] .gs-eyebrow {
  background: rgba(91, 33, 182, .16);
  border-color: rgba(196, 181, 253, .30);
}

/* Button size variants */
.gs-btn-md  { height: 44px; padding: 0 1.25rem; }
.gs-btn-sm  { height: 36px; padding: 0 1rem; font-size: .8125rem; }
.gs-btn-lg  { height: 52px; padding: 0 1.5rem; font-size: 1rem; }
.gs-btn-sq  { width: 36px; padding: 0; }
.gs-btn-pill { border-radius: var(--gs-rf) !important; }
.gs-btn-block { width: 100%; justify-content: center; }

/* White button for dark backgrounds */
.gs-btn-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  background: #fff;
  border: 2px solid #fff;
  color: #5B21B6;
  font-family: var(--gs-fd);
  font-weight: 700;
  font-size: 1rem;
  height: 52px;
  padding: 0 1.75rem;
  border-radius: var(--gs-rf);
  text-decoration: none;
  cursor: pointer;
  transition: background .18s, box-shadow .18s, transform .1s;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
  white-space: nowrap;
}
.gs-btn-white:hover { background: #F5F3FF; color: #5B21B6; text-decoration: none; }
.gs-btn-white:active { transform: translateY(1px); }
.gs-btn-white:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255,255,255,.5); }

/* Ghost-white outline button for dark backgrounds */
.gs-btn-white-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, .45);
  color: #fff;
  font-family: var(--gs-fd);
  font-weight: 600;
  font-size: .9375rem;
  height: 52px;
  padding: 0 1.5rem;
  border-radius: var(--gs-rf);
  text-decoration: none;
  cursor: pointer;
  transition: background .18s, border-color .18s, transform .1s;
  white-space: nowrap;
}
.gs-btn-white-outline:hover {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .7);
  color: #fff;
  text-decoration: none;
}
.gs-btn-white-outline:active { transform: translateY(1px); }


/* ============================================================
 * § 07 · BADGE COLOUR VARIANTS
 * Colour modifier classes for .gs-badge (base in framework).
 * ============================================================ */

.gs-badge-p  { background: var(--gs-cp-m);     color: var(--gs-cp-t);      }
.gs-badge-g  { background: #DCFCE7;            color: #16A34A;             }
.gs-badge-b  { background: #DBEAFE;            color: #1D4ED8;             }
.gs-badge-r  { background: #FEE2E2;            color: #DC2626;             }
.gs-badge-y  { background: #FFFBEB;            color: #92400E;             }
.gs-badge-nt { background: var(--gs-bg2);      color: var(--gs-tx1);       }

.gs-badge-solid-p { background: var(--gs-cp);      color:var(--gs-cp-fg,#fff); }
.gs-badge-solid-g { background: var(--gs-cs);      color: #fff; }
.gs-badge-solid-b { background: var(--gs-ct);      color: #fff; }
.gs-badge-solid-r { background: #DC2626;           color: #fff; }

/* Semantic shorthand badges */
.gs-badge-hot  { background: #FFF7ED; color: #C2410C; }
.gs-badge-new  { background: #DBEAFE; color: #1D4ED8; }
.gs-badge-deal { background: #DCFCE7; color: #16A34A; }
.gs-badge-warn { background: #FFFBEB; color: #92400E; }


/* ============================================================
 * § 08 · FORM FIELD HELPERS
 * Used on all auth pages, contact, and dashboard forms.
 * ============================================================ */

.gs-field { margin-bottom: 1.25rem; }

.gs-err {
  border-color: var(--gs-status-error) !important;
  background: var(--gs-error-bg) !important;
}
.gs-err:focus { box-shadow: var(--gs-focus-ring-error) !important; }

.gs-ok {
  border-color: var(--gs-status-success) !important;
}
.gs-ok:focus { box-shadow: var(--gs-focus-ring-success) !important; }

.gs-err-msg {
  display: none;
  align-items: center;
  gap: .3rem;
  font-size: .75rem;
  color: var(--gs-status-error);
  margin-top: .375rem;
  line-height: 1.4;
}
.gs-err-msg.visible { display: flex; }

.gs-ok-msg {
  display: none;
  align-items: center;
  gap: .3rem;
  font-size: .75rem;
  color: var(--gs-status-success);
  margin-top: .375rem;
}
.gs-ok-msg.visible { display: flex; }

.gs-help {
  font-size: .75rem;
  color: var(--gs-tx2);
  margin-top: .375rem;
  line-height: 1.5;
}

.gs-check-wrap {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
}

/* Inline form-level alert */
.gs-form-alert {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .875rem 1rem;
  border-radius: var(--gs-rmd);
  font-size: .875rem;
  line-height: 1.55;
  margin-bottom: 1.25rem;
  border-left: 3px solid;
}
.gs-form-alert-error   { background: var(--gs-error-bg);   border-color: var(--gs-status-error);   color: var(--gs-status-error-text); }
.gs-form-alert-success { background: var(--gs-success-bg); border-color: var(--gs-status-success); color: var(--gs-status-success-text); }
.gs-form-alert-info    { background: var(--gs-info-bg);    border-color: var(--gs-ct);             color: var(--gs-status-info-text); }

.gs-back-link {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .875rem;
  color: var(--gs-tx2);
  text-decoration: none;
  margin-bottom: 1.5rem;
  transition: color .15s;
}
.gs-back-link:hover { color: var(--gs-cp); }


/* ============================================================
 * § 09 · OTP + PASSWORD COMPONENTS
 * Used on auth-email-verification and all auth pages.
 * ============================================================ */

.gs-otp-group {
  display: flex;
  gap: .625rem;
  justify-content: center;
}
.gs-otp-input {
  width: 52px;
  height: 60px;
  text-align: center;
  font-family: var(--gs-fd);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gs-tx0);
  border: 1.5px solid var(--gs-bd1);
  border-radius: var(--gs-rmd);
  background: var(--gs-sf0);
  outline: none;
  caret-color: var(--gs-cp);
  transition: border-color .15s, box-shadow .15s, background .15s;
  -webkit-appearance: none;
  appearance: none;
}
.gs-otp-input:focus { border-color: var(--gs-cp); box-shadow: var(--gs-foc); }
.gs-otp-input.filled { border-color: var(--gs-cp); background: var(--gs-cp-s); }
.gs-otp-input.gs-err { border-color: var(--gs-status-error) !important; background: var(--gs-error-bg) !important; }

.gs-pw-input { padding-right: 3rem; }
.gs-pw-toggle {
  position: absolute;
  right: .75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--gs-tx2);
  cursor: pointer;
  padding: 0;
  transition: color .15s;
}
.gs-pw-toggle:hover { color: var(--gs-tx0); }
.gs-pw-toggle:focus-visible { outline: none; box-shadow: var(--gs-foc); border-radius: var(--gs-rsm); }
.gs-pw-label { font-size: .6875rem; font-weight: 600; color: var(--gs-tx2); }
.gs-countdown { font-size: .875rem; color: var(--gs-tx2); font-variant-numeric: tabular-nums; }


/* ============================================================
 * § 10 · STAT / KPI CARDS
 * Dashboard pages and auth left-panel stats.
 * ============================================================ */

.gs-stat-card {
  background: var(--gs-sf1);
  border: 1px solid var(--gs-bd1);
  border-radius: var(--gs-rxl);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .375rem;
}
.gs-stat-value {
  font-family: var(--gs-fd);
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--gs-tx0);
  font-variant-numeric: tabular-nums;
}
.gs-stat-label {
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--gs-tx2);
}
/* Auth panel stats (white text on purple bg) */
.gs-stat-num {
  font-family: var(--gs-fd);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
}
.gs-stat-lbl {
  font-size: .75rem;
  margin-top: .25rem;
}
/* Delta indicators */
.gs-stat-delta {
  gap: .25rem;
  font-size: .75rem;
  font-weight: 600;
}
.gs-stat-delta-up   { color: var(--gs-cs); }
.gs-stat-delta-down { color: #DC2626;      }
.gs-stat-delta-nt   { color: var(--gs-tx2); }


/* ============================================================
 * § 11 · DASHBOARD NAV HELPERS
 * Used across all 12 dashboard pages.
 * ============================================================ */

.gs-section-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gs-tx0);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.gs-page-sub {
  font-size: .9375rem;
  color: var(--gs-tx2);
  line-height: 1.55;
  margin-top: .375rem;
}
.gs-sb-section-label {
  font-size: .5625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--gs-tx2);
  padding: .875rem 1.125rem .375rem;
  display: block;
  margin-bottom:0;
}
.gs-sb-nav {
  padding: .375rem .625rem;
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--gs-bd0) transparent;
}
.gs-sb-footer {
  padding: .875rem .625rem;
  border-top: 1px solid var(--gs-bd0);
  flex-shrink: 0;
}


/* ============================================================
 * § 12 · TABLE WRAPPER
 * Horizontal scroll container for .gs-table.
 * Used on dashboard-api-keys, -billing, -saved-tools, -support.
 * ============================================================ */

.gs-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--gs-bd1);
  border-radius: var(--gs-rxl);
}


/* ============================================================
 * § 13 · TOGGLE (UI switch)
 * iOS-style checkbox toggle.
 * Used on: dashboard-notifications, dashboard-settings.
 * ============================================================ */

.gs-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  gap: .75rem;
}
.gs-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.gs-toggle-track {
  width: 44px;
  height: 24px;
  border-radius: var(--gs-rf);
  background: var(--gs-bd2);
  transition: background .2s;
  position: relative;
  flex-shrink: 0;
}
.gs-toggle input:checked ~ .gs-toggle-track { background: var(--gs-cp); }
.gs-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--gs-shsm);
  transition: transform .2s;
}
.gs-toggle input:checked ~ .gs-toggle-track .gs-toggle-thumb { transform: translateX(20px); }
.gs-toggle input:focus-visible ~ .gs-toggle-track { box-shadow: var(--gs-foc); }
.gs-toggle-label { font-size: .875rem; color: var(--gs-tx1); user-select: none; }


/* ============================================================
 * § 14 · PRICING TOGGLE
 * Monthly / Annual billing switcher.
 * Used on: pricing, goji-lower-sections, index.
 * ============================================================ */

.gs-ptog-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 2.5rem;
}
.gs-ptog {
  display: inline-flex;
  align-items: center;
  background: var(--gs-sf2);
  border: 1px solid var(--gs-bd0);
  border-radius: var(--gs-rf);
  padding: 4px;
  gap: 2px;
}
.gs-ptog-opt {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1.125rem;
  border: none;
  border-radius: var(--gs-rf);
  background: transparent;
  font-family: var(--gs-fd);
  font-size: .875rem;
  font-weight: 500;
  color: var(--gs-tx2);
  cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
}
.gs-ptog-opt.active {
  background: var(--gs-sf0);
  color: var(--gs-tx0);
  font-weight: 600;
  box-shadow: var(--gs-shsm);
}
.gs-ptog-opt:hover:not(.active) { color: var(--gs-tx0); }
.gs-ptog-opt:focus-visible { outline: none; box-shadow: var(--gs-foc); }

.gs-save-pill {
  display: inline-flex;
  align-items: center;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 7px;
  background: #DCFCE7;
  color: #16A34A;
  border-radius: var(--gs-rf);
}


/* ============================================================
 * § 15 · PRICING CARDS
 * Used on: pricing, goji-lower-sections, index (3+ pages).
 * ============================================================ */

.gs-price-card {
  background: var(--gs-sf1);
  border: 1.5px solid var(--gs-bd0);
  border-radius: var(--gs-r2xl);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  position: relative;
  /* The card owns its own alignment. It used to have NONE, so it inherited: centred on /pricing
     (an ancestor there sets it) and left on the homepage, where nothing in the chain does — the
     same component rendering two different ways depending on where it was dropped. Declared here
     so every price surface matches. The feature bullets opt back out via `text-align:left` on
     `.gs-plan-feats li`, which must stay — a bulleted list reads down a straight left edge. */
  text-align: center;
}
.gs-plan-tier {
  font-size: .625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--gs-color-primary);
  margin-bottom: .5rem;
}
.gs-plan-name {
  font-family: var(--gs-fd);
  font-size: 1.625rem;
  font-weight: 800;
  color: var(--gs-tx0);
  margin-bottom: .375rem;
}
.gs-plan-desc {
  font-size: .8125rem;
  color: var(--gs-tx2);
  line-height: 1.45;
  margin-bottom: 1.5rem;
  /* keep every card's description to a uniform 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gs-price-display {
  display: flex;
  align-items: flex-end;
  gap: .2rem;
  margin-bottom: .375rem;
  /* The card centres its text, but this row is a FLEX container — flex items are positioned by
     justify-content, which `text-align` cannot touch. Without this the price sat flush left while
     the tier, name and note above it were centred (measured 33px left vs 152px right on a card).
     align-items above is the cross axis (baseline of "Rs" / amount / "/mo"); this is the main one. */
  justify-content: center;
}
.gs-price-cur {
  font-family: var(--gs-fd);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--gs-tx0);
  line-height: 1.15;
}
.gs-price-amt {
  font-family: var(--gs-fd);
  font-size: 3.75rem;
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--gs-tx0);
  line-height: .95;
}
.gs-price-per {
  font-size: .9375rem;
  color: var(--gs-tx2);
  margin-bottom: .375rem;
}
.gs-price-note {
  font-size: .75rem;
  color: var(--gs-tx2);
  margin-bottom: 1.75rem;
}
.gs-plan-divider {
  height: 1px;
  background: var(--gs-bd1);
  margin-bottom: 1.5rem;
}
.gs-plan-feats {
  list-style: none;
  padding: 0;
  margin: 0 0 1.75rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .625rem;
  /* ⚠️ The list spans the card's content box on purpose — do NOT add `align-self: center`.
     Shrinking it to its longest bullet does centre each block, but every card then centres to a
     different width, so the three cards' bullets start at different x (measured: 69 / 37 / 33px
     on desktop — a 36px spread). Owner's call: aligned columns across cards beat a centred block.
     Bullets keep their straight left edge via the text-align on the item below. */
}
.gs-popular-pip {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: var(--gs-color-primary);
    color: var(--gs-cp-fg, #fff);
    font-family: var(--gs-font-display);
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 0 0 var(--gs-radius-lg) var(--gs-radius-lg);
    white-space: nowrap;
}

/* Popular card highlight + feature check/cross colors (were missing — inline in theme) */
.gs-price-card.popular {
  border-color: var(--gs-cp);
  box-shadow: 0 14px 40px -12px rgba(91, 33, 182, .35);
}
@media (min-width: 768px) {
  .gs-price-card.popular { transform: scale(1.025); }
  .gs-price-card.popular:hover { transform: scale(1.03); }
}
.gs-price-card:not(.popular) { transition: box-shadow .2s, border-color .2s, transform .2s; }
.gs-price-card:not(.popular):hover {
  box-shadow: var(--gs-shlg, 0 12px 28px -8px rgba(17,24,39,.18));
  border-color: var(--gs-cp-b);
}
.gs-plan-feats li {
  display: flex; align-items: flex-start; gap: .625rem;
  font-size: .875rem; color: var(--gs-tx1); line-height: 1.5;
  /* The price card centres its text (tier, price, plan name) and that INHERITS into the feature
     list. A one-line bullet hides it — the flex row still starts at the left — but the moment a
     bullet wraps, its second line centres under the first ("Unlimited orders, products &
     customers"). A bulleted list must read down a straight left edge, so pin it here. Fixing it on
     the item, not the card, keeps the card's own centred price/name intact. */
  text-align: left;
}
.gs-plan-feats .check { color: var(--gs-green-600); font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.gs-plan-feats .cross { color: #CBD5E1; font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.gs-plan-feats .off   { color: var(--gs-tx2); }
[data-theme="dark"] .gs-plan-feats .cross { color: #475569; }


/* ============================================================
 * § 16 · FAQ ACCORDION
 * Used on: blog-detail, pricing, goji-lower-sections, index.
 * ============================================================ */

.gs-faq-list { display: flex; flex-direction: column; }
.gs-faq-item { border-bottom: 1px solid var(--gs-bd0); }
.gs-faq-item:last-child { border-bottom: none; }
.gs-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--gs-fd);
  font-size: .9375rem;
  font-weight: 600;
  color: var(--gs-tx0);
  gap: 1rem;
  transition: color .15s;
}
.gs-faq-q:hover { color: var(--gs-cp); }
.gs-faq-q:focus-visible { outline: none; box-shadow: var(--gs-foc); border-radius: var(--gs-rsm); }
.gs-faq-q[aria-expanded="true"] { color: var(--gs-cp); }
.gs-faq-q i { flex-shrink: 0; transition: transform .28s; color: var(--gs-tx2); }
.gs-faq-q[aria-expanded="true"] i { transform: rotate(180deg); color: var(--gs-cp); }
.gs-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .32s ease, padding .32s ease;
}
.gs-faq-item.open .gs-faq-a {
  max-height: 600px;
  padding-bottom: 1rem;
}
.gs-faq-a p {
  font-size: .9375rem;
  color: var(--gs-tx1);
  line-height: 1.7;
}


/* ============================================================
 * § 17 · BLOG CARD BODY
 * Card inner area on blog index and homepage sections.
 * ============================================================ */

.gs-blog-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.gs-blog-title {
  font-family: var(--gs-fd);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--gs-tx0);
  margin-bottom: .625rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Coloured thumb gradients used on blog cards */
.gs-blog-thumb-marketing  { background: linear-gradient(135deg, #EA580C 0%, #9A3412 100%); }
.gs-blog-thumb-comparison { background: linear-gradient(135deg, #1D4ED8 0%, #1E3A8A 100%); }


/* ============================================================
 * § 18 · NEWSLETTER SECTION
 * Purple gradient section used on blog, blog-detail,
 * goji-lower-sections.
 * ============================================================ */

.gs-nl-sec {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #5B21B6 0%, #3B21B6 100%);
  padding: 5rem 0;
}
.gs-nl-h2 {
  font-family: var(--gs-fd);
  font-size: clamp(1.875rem, 3.5vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.15;
  color: #fff;
  margin-bottom: 1rem;
}
.gs-nl-sub {
  font-size: 1rem;
  color: rgba(255, 255, 255, .75);
  line-height: 1.65;
  margin-bottom: .25rem;
}
.gs-nl-eyebrow {
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .55);
  margin-bottom: .875rem;
}
.gs-nl-input {
  width: 100%;
  height: 50px;
  padding: 0 1.125rem;
  border: 1.5px solid rgba(255, 255, 255, .3);
  border-radius: var(--gs-rf);
  background: rgba(255, 255, 255, .15);
  color: #fff;
  font-family: var(--gs-fb);
  font-size: .9375rem;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.gs-nl-input::placeholder { color: rgba(255, 255, 255, .55); }
.gs-nl-input:focus {
  border-color: rgba(255, 255, 255, .6);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .2);
}
.gs-nl-form {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--gs-r2xl);
  padding: 1.75rem;
}
.gs-nl-form-wrap {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: var(--gs-rxl);
  padding: 2rem;
}
.gs-nl-form-title {
  font-family: var(--gs-fd);
  font-size: 1.125rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .375rem;
}
.gs-nl-form-sub {
  font-size: .8125rem;
  color: rgba(255, 255, 255, .6);
  margin-bottom: 1.5rem;
}
.gs-nl-benefits {
  list-style: none;
  padding: 0;
  margin: 0;
}
.gs-nl-benefit {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  font-size: .9375rem;
  color: rgba(255, 255, 255, .85);
  line-height: 1.5;
  margin-bottom: .5rem;
}
.gs-nl-benefit i { color: #4ADE80; flex-shrink: 0; margin-top: 2px; }
.gs-nl-sub-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  width: 100%;
  height: 50px;
  border: none;
  border-radius: var(--gs-rf);
  background: #fff;
  color: #5B21B6;
  font-family: var(--gs-fd);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: background .18s, box-shadow .18s;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
.gs-nl-sub-btn:hover { background: #F5F3FF; box-shadow: 0 8px 24px rgba(0, 0, 0, .22); }
.gs-nl-disclaimer {
  font-size: .75rem;
  color: rgba(255, 255, 255, .45);
  text-align: center;
  line-height: 1.5;
}
.gs-nl-footnote {
  font-size: .75rem;
  color: rgba(255, 255, 255, .45);
  text-align: center;
  margin-top: .875rem;
}
/* Decorative blobs inside newsletter section */
.gs-nl-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.gs-nl-blob-1 { width: 360px; height: 360px; top: -120px;  right: -50px; background: rgba(255, 255, 255, .06); }
.gs-nl-blob-2 { width: 280px; height: 280px; bottom: -80px; left: -30px; background: rgba(255, 255, 255, .04); }


/* ============================================================
 * § 19 · SKELETON LOADER
 * Shimmer animation used on all dashboard pages.
 * ============================================================ */

@keyframes gs-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.gs-skel {
  background: linear-gradient(
    90deg,
    var(--gs-bg2) 25%,
    var(--gs-bg1) 50%,
    var(--gs-bg2) 75%
  );
  background-size: 200% 100%;
  animation: gs-shimmer 1.5s infinite;
  border-radius: var(--gs-rsm);
  display: block;
}
.gs-skel-text   { height: .875rem;  margin-bottom: .5rem; }
.gs-skel-title  { height: 1.375rem; max-width: 60%; margin-bottom: .75rem; }
.gs-skel-circle { border-radius: 50%; }
.gs-skel-btn    { height: 2.75rem;  border-radius: var(--gs-rmd); }


/* ============================================================
 * § 20 · AUTH PAGE SHELL
 * Two-panel layout: brand left, form right.
 * Used on all 5 auth pages.
 * ============================================================ */

.gs-auth-page {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr;          /* mobile: single column (brand hidden) */
}
/* Desktop: brand panel (left) + form panel (right), split screen */
@media (min-width: 768px) {
  .gs-auth-page { grid-template-columns: 1.05fr 1fr; }
}
@media (min-width: 1280px) {
  .gs-auth-page { grid-template-columns: 1.15fr 1fr; }
}
.gs-auth-form-side {
  background: var(--gs-bg0);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 2rem;
  min-height: 100dvh;
}
/* Brand panel — refined premium gradient (overrides the framework default) */
.gs-auth-brand {
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(124, 58, 237, .55) 0%, transparent 55%),
    radial-gradient(100% 80% at 0% 100%, rgba(61, 139, 55, .35) 0%, transparent 50%),
    linear-gradient(155deg, #4C1D95 0%, #5B21B6 45%, #2E1065 100%);
  padding: clamp(2.5rem, 4vw, 4rem);
}
.gs-brand-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
  max-width: 32rem;
}
.gs-brand-inner-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.gs-brand-h {
  font-family: var(--gs-fd);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -.035em;
  line-height: 1.15;
  margin-bottom: 1rem;
}
.gs-brand-sub {
  font-size: 1.0625rem;
  color: rgba(255, 255, 255, .75);
  line-height: 1.65;
  margin-bottom: 2rem;
}
.gs-brand-stats {
  display: flex;
  gap: 2rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}
.gs-brand-bullets  { display: flex; flex-direction: column; gap: .875rem; }
.gs-brand-bullet   { display: flex; align-items: center; gap: .875rem; }
.gs-bullet-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--gs-rsm);
  background: rgba(255, 255, 255, .12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
}
.gs-bullet-text { font-size: .9375rem; color: rgba(255, 255, 255, .82); line-height: 1.45; }

/* Mobile-only logo (auth pages) */
.gs-mobile-logo {
  display: none;
  align-items: center;
  gap: .375rem;
  text-decoration: none;
  margin-bottom: 1.5rem;
}
.gs-mobile-mark {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #5B21B6, #3D8B37);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.gs-mobile-name {
  font-family: var(--gs-fd);
  font-weight: 800;
  font-size: 1.125rem;
  color: var(--gs-tx0);
  letter-spacing: -.025em;
}

/* ============================================================
 * HOMEPAGE S10 — "The Numbers Speak…" stats (exact match to index.html).
 * Scoped under .gs-sec-dark so the SHARED .gs-stat-card used by the dashboard
 * (overview/affiliate/support KPI cards) keeps its boxed look.
 * ============================================================ */
.gs-dark-bg-layer { position:absolute; inset:0; pointer-events:none; }
.gs-dark-bg-layer::before {
  content:''; position:absolute; top:-120px; left:-100px;
  width:560px; height:560px; border-radius:50%;
  background:radial-gradient(circle, rgba(91,33,182,.22) 0%, transparent 70%);
}
.gs-dark-bg-layer::after {
  content:''; position:absolute; bottom:-100px; right:-60px;
  width:400px; height:400px; border-radius:50%;
  background:radial-gradient(circle, rgba(61,139,55,.15) 0%, transparent 70%);
}
.gs-sec-dark .gs-stat-card {
  background:none; border:none; border-radius:0; box-shadow:none;
  text-align:center; padding:2rem 1rem;
}
@media (min-width:768px) {
  .gs-sec-dark .gs-stat-card + .gs-stat-card { border-left:1px solid rgba(255,255,255,.1); }
}
@media (max-width:767.98px) {
  .gs-sec-dark .gs-stat-card { border-bottom:1px solid rgba(255,255,255,.08); }
  .gs-sec-dark .gs-stat-card:nth-child(odd) { border-right:1px solid rgba(255,255,255,.08); }
  .gs-sec-dark .gs-stat-card:nth-last-child(-n+2) { border-bottom:none; }
}
.gs-sec-dark .gs-stat-num {
  display:block; font-family:var(--gs-fd);
  font-size:clamp(2.5rem, 5vw, 3.75rem);
  font-weight:800; letter-spacing:-.04em; line-height:1; margin:0 0 .625rem;
}
.gs-sec-dark .gs-stat-lbl {
  font-size:.875rem; color:rgba(255,255,255,.55); font-weight:500; line-height:1.4; margin:0;
}

/* Dynamic logo images in footer (white) + dashboard sidebar (color) */
.gs-footer-logo-img { width: auto; max-width: 200px; display: block; }
.gs-nav-logo-img    { max-height: 30px; width: auto; max-width: 80px; display: block; }
/* Mobile: tighter cap on the logo. Same 991.98px breakpoint the header's brand-name block uses, so
   the two travel together. `width:auto` above is what keeps the aspect ratio — the image scales to
   satisfy whichever of max-width/max-height binds first, it is never squashed. */
@media (max-width: 991.98px) {
  .gs-nav-logo-img { max-width: 40px; }
}

/* ============================================================
 * HOMEPAGE TOOL CARD (S07 Featured / S08 Trending) — extracted verbatim
 * from index.html inline <style> (gs-tool-card / gs-tc-* / gs-rating).
 * ============================================================ */
.gs-tool-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--gs-surface-1); border: 1px solid var(--gs-border-default);
  border-radius: var(--gs-radius-2xl); padding: 1.5rem;
  box-shadow: var(--gs-shadow-sm);
  transition: transform .28s cubic-bezier(.4,0,.2,1), box-shadow .28s ease, border-color .28s ease;
  overflow: hidden;
}
/* premium top accent bar — fades in on hover */
.gs-tool-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--gs-cp,#5b21b6), #7c3aed 55%, #a78bfa);
  opacity: 0; transition: opacity .28s ease;
}
.gs-tool-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 48px -16px rgba(91,33,182,.32), 0 6px 16px rgba(2,6,23,.06);
  border-color: var(--gs-color-primary-border);
}
.gs-tool-card:hover::before { opacity: 1; }
.gs-tc-head { display: flex; align-items: flex-start; gap: .875rem; margin-bottom: 1rem; }
.gs-tc-logo {
  width: 54px; height: 54px; border-radius: 15px;
  background: linear-gradient(135deg, var(--gs-cp-s,#f5f3ff), #ffffff 70%);
  border: 1px solid var(--gs-border-default);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 3px rgba(2,6,23,.06);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.55rem; color: var(--gs-cp,#5b21b6); flex-shrink: 0; overflow: hidden;
  transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.gs-tool-card:hover .gs-tc-logo { transform: scale(1.07) rotate(-3deg); }
.gs-tc-logo img { width: 100%; height: 100%; object-fit: contain; }
.gs-tc-meta { flex: 1; min-width: 0; }
.gs-tc-name {
  font-family: var(--gs-font-display); font-size: 1rem; font-weight: 700;
  color: var(--gs-text-primary); line-height: 1.2; margin: 0 0 .25rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gs-tc-cat {
  font-size: .6875rem; color: var(--gs-text-tertiary); font-weight: 500;
  text-transform: uppercase; letter-spacing: .04em;
}
.gs-tc-desc {
  font-size: .875rem; color: var(--gs-text-secondary);
  line-height: 1.55; flex: 1; margin-bottom: .875rem;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.gs-tc-meta-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; margin-bottom: .875rem;
}
.gs-rating { display: flex; align-items: center; gap: .25rem; flex-shrink: 0; }
.gs-rating i { color: var(--gs-orange-500); font-size: .75rem; }
.gs-rating-num { font-size: .8125rem; font-weight: 600; color: var(--gs-text-primary); }
.gs-rating-ct  { font-size: .75rem;   color: var(--gs-text-tertiary); }
.gs-tc-price   { font-size: .8125rem; color: var(--gs-text-primary); font-weight: 700; text-align: right; }
.gs-tc-footer  { display: flex; gap: .5rem; align-items: center; margin-top: auto; padding-top: .25rem; }
.gs-tc-footer .gs-btn-primary {
  flex: 1; font-size: .8125rem; font-weight: 600; border: 0;
  background: linear-gradient(135deg, var(--gs-cp,#5b21b6), #7c3aed);
  box-shadow: 0 4px 12px -2px rgba(91,33,182,.45);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.gs-tc-footer .gs-btn-primary:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 8px 20px -4px rgba(91,33,182,.55); }
.gs-tc-footer .gs-btn-subtle  { width: 38px; height: 38px; padding: 0; flex-shrink: 0; border-radius: var(--gs-radius-md); transition: color .2s ease, border-color .2s ease, background .2s ease; }
.gs-tc-footer .gs-btn-subtle:hover { color: var(--gs-cp,#5b21b6); border-color: var(--gs-color-primary-border); background: var(--gs-cp-s,#f5f3ff); }

/* Homepage blog thumb — soft gradient + centered emoji (theme S14 look).
   Modifier so the shared 16:9 .gs-blog-thumb (blog index image cards) is untouched. */
.gs-blog-thumb-emoji {
  aspect-ratio: auto; height: 190px;
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem; overflow: hidden;
}

/* S08 Trending — horizontal snap-scroll row (verbatim from index.html) */
.gs-scroll-outer { position: relative; overflow: hidden; }
.gs-scroll-outer::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0;
  width: 80px; pointer-events: none;
  background: linear-gradient(to right, transparent, var(--gs-bg-base));
}
.gs-scroll-row {
  display: flex; gap: 1rem;
  overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding-bottom: .75rem;
}
.gs-scroll-row::-webkit-scrollbar { display: none; }
.gs-scroll-row .gs-tool-card { min-width: 280px; flex-shrink: 0; scroll-snap-align: start; }

/* Brand panel logo (left, dark gradient) — dynamic from admin (logo_white) */
.gs-brand-logo {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  margin-bottom: 2rem;
}
.gs-brand-logo-img { height: 40px; width: auto; max-width: 220px; display: block; }
/* Mobile auth logo (on the light form card) — dynamic from admin (logo) */
.gs-mobile-logo-img { height: 34px; width: auto; max-width: 190px; display: block; }

/* Auth card footer ("Don't have an account? …") — shared across login/register/forgot */
.gs-auth-footer { text-align: center; font-size: .9375rem; color: var(--gs-tx2); margin-top: 1.5rem; }
.gs-auth-footer a { font-weight: 600; white-space: nowrap; }

/* Auth header icon badge (forgot/reset/verify) — branded, clearly visible */
.gs-auth-icon {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.625rem; line-height: 1;
  border-radius: var(--gs-rlg, 14px);
  background: linear-gradient(135deg, var(--gs-cp, #5B21B6) 0%, #7C3AED 100%);
  color: #fff;
  box-shadow: 0 8px 20px -6px rgba(91, 33, 182, .45);
  margin-bottom: 1.25rem;
}
[data-theme="dark"] .gs-auth-icon {
  background: linear-gradient(135deg, #6D28D9 0%, #A78BFA 100%);
  box-shadow: 0 8px 20px -6px rgba(124, 58, 237, .5);
}

/* ── Checkbox tick — robust override (guarantees the check shows in light mode) ── */
.gs-check {
  -webkit-appearance: none; appearance: none;
  flex-shrink: 0; width: 1.15rem; height: 1.15rem; margin-top: .1rem;
  border: 1.5px solid var(--gs-bd2, #9ca3af);
  border-radius: var(--gs-rxs, 5px);
  background-color: var(--gs-sf0, #fff);
  background-repeat: no-repeat; background-position: center;
  background-size: .7rem .7rem;
  cursor: pointer; position: relative;
  transition: background-color .15s, border-color .15s;
}
.gs-check:checked {
  background-color: var(--gs-cp, #5B21B6);
  border-color: var(--gs-cp, #5B21B6);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E");
}
.gs-check:focus-visible { outline: none; box-shadow: var(--gs-foc, 0 0 0 3px rgba(91,33,182,.3)); }

/* ── Searchable country autocomplete (register) ── */
.gs-autocomplete { position: relative; }
.gs-ac-list {
  list-style: none; margin: .25rem 0 0; padding: .25rem;
  position: absolute; left: 0; right: 0; top: calc(100% + 2px); z-index: 50;
  background: var(--gs-sf0, #fff);
  border: 1px solid var(--gs-bd1, #e5e7eb);
  border-radius: var(--gs-rmd, 10px);
  box-shadow: 0 12px 28px -8px rgba(17,24,39,.25);
  max-height: 16rem; overflow-y: auto;
}
.gs-ac-item {
  display: flex; align-items: center; gap: .625rem;
  padding: .5rem .625rem; border-radius: var(--gs-rsm, 7px);
  cursor: pointer; font-size: .9375rem; color: var(--gs-tx1, #374151);
}
.gs-ac-item:hover, .gs-ac-item.active { background: var(--gs-cp-s, #f5f3ff); color: var(--gs-tx0, #111827); }
.gs-ac-flag { width: 24px; height: 18px; border-radius: 3px; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.gs-ac-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-ac-dial { color: var(--gs-tx2, #6b7280); font-size: .8125rem; flex-shrink: 0; }

/* ── Phone field with dial-code add-on ── */
.gs-phone-wrap { display: flex; align-items: stretch; gap: .5rem; }
.gs-phone-dial {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  min-width: 3.5rem; padding: 0 .75rem;
  border: 1px solid var(--gs-bd1, #e5e7eb); border-radius: var(--gs-rmd, 10px);
  background: var(--gs-bg2, #f3f4f6); color: var(--gs-tx1, #374151);
  font-weight: 600; font-size: .9375rem;
}
.gs-phone-input { flex: 1; min-width: 0; }

/* ── Honeypot — visually hidden but present in the DOM (off-screen, not display:none) ── */
.gs-hp {
  position: absolute !important; left: -9999px !important; top: auto;
  width: 1px; height: 1px; overflow: hidden;
  opacity: 0; pointer-events: none;
}

/* ============================================================
 * FOOTER — newsletter row + legal-links + payment row
 * (newsletter/legal-links CSS extracted verbatim from index.html
 * inline <style>; payment row is the new admin-managed component)
 * ============================================================ */
.gs-footer-nl-row {
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 2rem 0;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1.25rem;
}
.gs-footer-nl-txt {
  font-size: .9375rem; color: rgba(255,255,255,.65); max-width: 320px;
  line-height: 1.5;
}
.gs-footer-nl-txt strong { color: #fff; font-weight: 600; }
.gs-footer-nl-form {
  display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
}
.gs-footer-nl-input {
  height: 44px; min-width: 220px;
  background: rgba(255,255,255,.07); border: 1.5px solid rgba(255,255,255,.12);
  border-radius: var(--gs-radius-md, 10px); padding: 0 1rem;
  font-family: var(--gs-font-body, inherit); font-size: .875rem; color: #fff; outline: none;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none; appearance: none;
}
.gs-footer-nl-input::placeholder { color: rgba(255,255,255,.35); }
.gs-footer-nl-input:focus {
  border-color: rgba(255,255,255,.38);
  box-shadow: 0 0 0 3px rgba(167,139,250,.28);
}
.gs-footer-legal-links {
  display: flex; align-items: center; flex-wrap: wrap; gap: 1.25rem;
}
.gs-footer-legal-links a {
  font-size: .75rem; color: #6B7280; text-decoration: none; transition: color .15s;
}
.gs-footer-legal-links a:hover { color: #9CA3AF; text-decoration: none; }

/* Payment methods row */
.gs-footer-pay-row {
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 1.5rem 0;
  display: flex; align-items: center; flex-wrap: wrap; gap: .75rem;
}
.gs-footer-pay-label {
  font-size: .75rem; color: #6B7280; margin: 0 .25rem 0 0; white-space: nowrap;
}
.gs-footer-pay-icons { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.gs-footer-pay-icon {
  height: 30px; width: 46px; padding: 3px 5px;
  background: #fff; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 2px rgba(0,0,0,.18);
}
.gs-footer-pay-icon img { max-height: 100%; max-width: 100%; object-fit: contain; display: block; }
.gs-footer-pay-more {
  font-size: .8125rem; font-weight: 600; color: var(--gs-cp, #A78BFA);
  text-decoration: none; white-space: nowrap; margin-left: .25rem;
}
.gs-footer-pay-more:hover { text-decoration: underline; color: var(--gs-cp, #A78BFA); }

/* Footer currency switcher — mega-style grid on desktop, compact dropdown on mobile */
.gs-cur { position: relative; margin-left: auto; }
.gs-cur-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .8rem; border-radius: 10px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  color: #E5E7EB; font-size: .85rem; font-weight: 600; cursor: pointer; line-height: 1;
  transition: background .15s, border-color .15s;
}
.gs-cur-btn:hover { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22); }
.gs-cur-btn .bi-globe2 { color: var(--gs-cp, #A78BFA); }
.gs-cur-code { letter-spacing: .02em; }
.gs-cur-sym { color: #9CA3AF; }
.gs-cur-caret { font-size: .7rem; color: #9CA3AF; transition: transform .2s; }
.gs-cur.open .gs-cur-caret { transform: rotate(180deg); }
.gs-cur-panel {
  position: absolute; bottom: calc(100% + .6rem); right: 0; z-index: 80;
  width: 560px; max-width: calc(100vw - 2rem);
  background: #fff; color: #1e293b; border-radius: 16px;
  box-shadow: 0 20px 50px rgba(2,6,23,.35); border: 1px solid #e5e7eb;
  padding: 1rem; animation: gsCurIn .15s ease;
}
@keyframes gsCurIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.gs-cur-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
.gs-cur-title { font-weight: 800; font-size: .9rem; color: #0f172a; }
.gs-cur-search {
  flex: 0 0 220px; max-width: 55%; padding: .45rem .7rem; font-size: .85rem;
  border: 1px solid #e2e8f0; border-radius: 9px; outline: none; color: #1e293b; background: #fff;
}
.gs-cur-search:focus { border-color: var(--gs-cp, #7c3aed); box-shadow: 0 0 0 3px rgba(124,58,237,.12); }
.gs-cur-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(98px, 1fr));
  gap: .4rem; max-height: 320px; overflow-y: auto; padding-right: .2rem;
}
.gs-cur-opt {
  display: flex; align-items: center; justify-content: space-between; gap: .35rem;
  padding: .5rem .6rem; border-radius: 9px; text-decoration: none;
  color: #334155; font-size: .82rem; border: 1px solid transparent; background: #f8fafc;
  transition: background .12s, border-color .12s, color .12s;
}
.gs-cur-opt:hover { background: var(--gs-cp-s, #f5f3ff); border-color: var(--gs-cp, #c4b5fd); color: #0f172a; }
.gs-cur-opt.is-active { background: var(--gs-cp, #7c3aed); color:var(--gs-cp-fg,#fff); border-color: var(--gs-cp, #7c3aed); }
.gs-cur-opt.is-active .gs-cur-opt-sym { color: rgba(255,255,255,.82); }
.gs-cur-opt-code { font-weight: 700; letter-spacing: .02em; }
.gs-cur-opt-sym { color: #94a3b8; font-weight: 600; }
.gs-cur-auto { grid-column: 1 / -1; justify-content: flex-start; gap: .45rem; font-weight: 600; background: #eef2ff; color: #4338ca; }
.gs-cur-auto:hover { background: #e0e7ff; border-color: #818cf8; color: #3730a3; }
.gs-cur-auto .bi { color: #6366f1; }
.gs-cur-empty { grid-column: 1 / -1; text-align: center; color: #94a3b8; font-size: .85rem; padding: 1rem; }
@media (max-width: 575.98px) {
  .gs-cur { margin-left: 0; width: 100%; margin-top: .5rem; }
  .gs-cur-btn { width: 100%; justify-content: center; }
  .gs-cur-panel { width: calc(100vw - 2rem); right: auto; left: 0; padding: .85rem; }
  .gs-cur-head { flex-direction: column; align-items: stretch; }
  .gs-cur-search { flex: 1 1 auto; max-width: none; }
  .gs-cur-grid { grid-template-columns: repeat(2, 1fr); max-height: 52vh; }
}
@media (max-width: 767.98px) {
  .gs-footer-nl-row { flex-direction: column; align-items: flex-start; }
  .gs-footer-nl-form { width: 100%; }
  .gs-footer-nl-input { flex: 1; min-width: 0; }
}

/* Payment methods page — grid of accepted methods */
.gs-pm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
.gs-pm-card {
  display: flex; align-items: center; gap: .875rem;
  padding: 1rem; border: 1px solid var(--gs-bd0, #e5e7eb); border-radius: var(--gs-rlg, 14px);
  background: var(--gs-sf0, #fff);
}
.gs-pm-logo {
  height: 40px; width: 60px; flex-shrink: 0; padding: 4px 6px;
  background: #fff; border: 1px solid var(--gs-bd0, #eee); border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
}
.gs-pm-logo img { max-height: 100%; max-width: 100%; object-fit: contain; }
.gs-pm-name { font-weight: 600; font-size: .9375rem; color: var(--gs-tx0, #111827); }
.gs-pm-note { font-size: .8125rem; color: var(--gs-tx2, #6b7280); margin-top: .125rem; }
.gs-pm-section { margin-bottom: 2.25rem; }
.gs-pm-section:last-of-type { margin-bottom: 0; }
.gs-pm-section-title {
  font-family: var(--gs-fd, inherit); font-size: 1.0625rem; font-weight: 700;
  color: var(--gs-tx0, #111827); letter-spacing: -.02em;
  display: flex; align-items: center; gap: .5rem;
  margin: 0 0 1rem; padding-bottom: .625rem;
  border-bottom: 1px solid var(--gs-bd0, #e5e7eb);
}
.gs-pm-flag { font-size: 1.2rem; line-height: 1; }

/* ============================================================
 * SEARCH RESULTS PAGE — extracted verbatim from html_themes/search.html
 * inline <style> (page-specific gs-srch-* components). gs-page-btn already
 * lives in goji-framework.css.
 * ============================================================ */
.gs-srch-hero {
  background: linear-gradient(155deg, var(--gs-purple-50) 0%, var(--gs-bg0) 60%);
  border-bottom: 1px solid var(--gs-bd0);
  padding: 2.5rem 0 2rem;
  position: relative;
  overflow: hidden;
}
[data-theme="dark"] .gs-srch-hero {
  background: linear-gradient(155deg, #1a0b3d 0%, #0C0E14 45%, #071407 100%);
}
.gs-srch-blob {
  position: absolute; border-radius: 50%;
  filter: blur(80px); pointer-events: none;
}
.gs-srch-blob-1 { width:400px;height:400px;top:-160px;right:-80px;background:var(--gs-purple-300);opacity:.06; }
.gs-srch-blob-2 { width:280px;height:280px;bottom:-100px;left:-60px;background:var(--gs-green-400);opacity:.05; }
[data-theme="dark"] .gs-srch-blob { opacity:.14; }

.gs-srch-bar { position:relative; max-width:48rem; }
.gs-srch-bar-icon {
  position:absolute; left:1.125rem; top:50%; transform:translateY(-50%);
  color:var(--gs-tx2); font-size:1.125rem; pointer-events:none; z-index:1;
}
.gs-srch-input {
  width:100%; height:56px; padding:0 5rem 0 3.25rem;
  border:1.5px solid var(--gs-bd1); border-radius:var(--gs-rf);
  background:var(--gs-sf0); font-family:var(--gs-fb); font-size:1.0625rem;
  color:var(--gs-tx0); outline:none; box-shadow:var(--gs-shsm);
  transition:border-color .15s,box-shadow .15s;
}
.gs-srch-input:focus { border-color:var(--gs-cp); box-shadow:var(--gs-foc); }
.gs-srch-input::placeholder { color:var(--gs-tx2); }
.gs-srch-submit {
  position:absolute; right:.375rem; top:.375rem;
  height:calc(100% - .75rem); padding:0 1.25rem;
  background:var(--gs-cp); color:var(--gs-cp-fg,#fff); border:none;
  border-radius:var(--gs-rf); font-family:var(--gs-fd);
  font-size:.9375rem; font-weight:600; cursor:pointer;
  transition:background .15s; white-space:nowrap;
}
.gs-srch-submit:hover { background:var(--gs-cp-h); }
.gs-srch-submit:focus-visible { outline:none; box-shadow:var(--gs-foc); }

.gs-srch-layout {
  display:grid; grid-template-columns:260px 1fr;
  gap:2rem; align-items:start; padding:2rem 0 4rem;
}
@media(max-width:991.98px) { .gs-srch-layout { grid-template-columns:1fr; } }

.gs-srch-sidebar {
  background:var(--gs-sf0); border:1px solid var(--gs-bd0);
  border-radius:var(--gs-rlg); padding:1.25rem;
  position:sticky; top:calc(var(--gs-nh) + 1rem);
}
@media(max-width:991.98px) { .gs-srch-sidebar { display:none; } }
.gs-srch-sidebar.is-open { display:block; }
.gs-srch-sidebar-hd {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:1.25rem; padding-bottom:.875rem;
  border-bottom:1px solid var(--gs-bd0);
}
.gs-srch-sidebar-title { font-size:.9375rem; font-weight:700; color:var(--gs-tx0); }
.gs-srch-filter-group {
  margin-bottom:1.25rem; padding-bottom:1.25rem;
  border-bottom:1px solid var(--gs-bd0);
}
.gs-srch-filter-group:last-of-type { border-bottom:none; margin-bottom:0; padding-bottom:0; }
.gs-srch-filter-lbl {
  font-size:.75rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; color:var(--gs-tx2); margin-bottom:.75rem; display:block;
}
.gs-srch-check {
  display:flex; align-items:center; gap:.625rem;
  padding:.3125rem 0; cursor:pointer; font-size:.875rem; color:var(--gs-tx1);
}
.gs-srch-check input[type="checkbox"],
.gs-srch-check input[type="radio"] {
  width:1rem; height:1rem; border-radius:.25rem;
  accent-color:var(--gs-cp); cursor:pointer; flex-shrink:0;
}
.gs-srch-check:hover { color:var(--gs-tx0); }
.gs-srch-check-count { margin-left:auto; font-size:.75rem; color:var(--gs-tx2); }

.gs-srch-hdr {
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; margin-bottom:1.25rem;
}
.gs-srch-count { font-size:.9375rem; color:var(--gs-tx1); font-weight:500; }
.gs-srch-count strong { color:var(--gs-tx0); font-weight:700; }

.gs-srch-sort { display:flex; align-items:center; gap:.625rem; }
.gs-srch-sort select {
  height:36px; padding:0 2rem 0 .75rem;
  border:1.5px solid var(--gs-bd1); border-radius:var(--gs-rmd);
  background:var(--gs-sf0); font-family:var(--gs-fb);
  font-size:.875rem; color:var(--gs-tx0); outline:none; cursor:pointer;
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 16 10'%3E%3Cpath fill='none' stroke='%236B7280' stroke-width='1.5' d='M2 2l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .625rem center;
  transition:border-color .15s;
}
.gs-srch-sort select:focus { border-color:var(--gs-cp); box-shadow:var(--gs-foc); }

.gs-srch-filter-toggle { display:none; }
@media(max-width:991.98px) { .gs-srch-filter-toggle { display:flex; } }

.gs-srch-tabs {
  display:flex; border-bottom:1px solid var(--gs-bd0);
  margin-bottom:1.5rem; overflow-x:auto; scrollbar-width:none; gap:0;
}
.gs-srch-tabs::-webkit-scrollbar { display:none; }
.gs-srch-tab {
  display:inline-flex; align-items:center; gap:.375rem;
  padding:.625rem 1rem; font-size:.875rem; font-weight:500; color:var(--gs-tx2);
  border-bottom:2px solid transparent; white-space:nowrap; cursor:pointer;
  background:none; border-top:none; border-left:none; border-right:none;
  text-decoration:none; transition:color .15s,border-color .15s;
  margin-bottom:-1px; flex-shrink:0;
}
.gs-srch-tab:hover { color:var(--gs-tx0); text-decoration:none; }
.gs-srch-tab.active { color:var(--gs-cp); border-bottom-color:var(--gs-cp); font-weight:600; }
.gs-srch-tab-badge {
  background:var(--gs-bg2); color:var(--gs-tx2);
  font-size:.6875rem; font-weight:700; padding:.125rem .4rem; border-radius:var(--gs-rf);
}
.gs-srch-tab.active .gs-srch-tab-badge { background:var(--gs-cp-s); color:var(--gs-cp); }

.gs-srch-chips { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:.75rem; min-height:0; }
.gs-srch-chip {
  display:inline-flex; align-items:center; gap:.375rem;
  padding:.3125rem .75rem; background:var(--gs-cp-m); color:var(--gs-cp-t);
  font-size:.8125rem; font-weight:600; border-radius:var(--gs-rf);
  border:none; cursor:pointer; font-family:var(--gs-fd); transition:background .12s;
  text-decoration:none;
}
.gs-srch-chip:hover { background:var(--gs-cp-b); color:var(--gs-cp-t); text-decoration:none; }
.gs-srch-chip:focus-visible { outline:none; box-shadow:var(--gs-foc); }

.gs-srch-cat-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(180px,100%),1fr));
  gap:.875rem; margin-bottom:2rem;
}
.gs-srch-cat-card {
  display:flex; align-items:center; gap:.75rem; padding:.875rem 1rem;
  background:var(--gs-sf0); border:1px solid var(--gs-bd0);
  border-radius:var(--gs-rlg); text-decoration:none; color:inherit;
  transition:border-color .15s,box-shadow .15s,transform .2s;
}
.gs-srch-cat-card:hover {
  border-color:var(--gs-cp-b); box-shadow:var(--gs-shsm);
  text-decoration:none; color:inherit; transform:translateY(-1px);
}
.gs-srch-cat-ico {
  width:40px; height:40px; border-radius:var(--gs-rmd);
  background:var(--gs-cp-s); display:flex; align-items:center;
  justify-content:center; font-size:1.25rem; flex-shrink:0;
}
.gs-srch-cat-name { font-size:.9375rem; font-weight:600; color:var(--gs-tx0); }
.gs-srch-cat-count { font-size:.8125rem; color:var(--gs-tx2); }

.gs-srch-tools-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));
  gap:1.25rem; margin-bottom:2rem;
}

.gs-srch-tool-card {
  background:var(--gs-sf0); border:1px solid var(--gs-bd0);
  border-radius:var(--gs-rlg); padding:1.25rem;
  display:flex; flex-direction:column; gap:.875rem;
  transition:box-shadow .2s,border-color .2s,transform .2s;
}
.gs-srch-tool-card:hover {
  box-shadow:var(--gs-shlg); border-color:var(--gs-cp-b); transform:translateY(-2px);
}
.gs-srch-tool-hd { display:flex; align-items:flex-start; gap:.875rem; }
.gs-srch-tool-logo {
  width:48px; height:48px; border-radius:var(--gs-rmd);
  background:var(--gs-bg2); border:1px solid var(--gs-bd0);
  display:flex; align-items:center; justify-content:center;
  font-size:1.75rem; flex-shrink:0; overflow:hidden;
}
.gs-srch-tool-logo img { width:100%; height:100%; object-fit:contain; }
.gs-srch-tool-name { font-family:var(--gs-fd); font-size:1rem; font-weight:700; color:var(--gs-tx0); margin-bottom:.25rem; line-height:1.25; }
.gs-srch-tool-meta { display:flex; align-items:center; gap:.375rem; flex-wrap:wrap; }
.gs-srch-tool-cat { font-size:.75rem; font-weight:600; color:var(--gs-cp-t); background:var(--gs-cp-s); padding:.125rem .5rem; border-radius:var(--gs-rf); }
.gs-srch-tool-desc { font-size:.875rem; color:var(--gs-tx2); line-height:1.6; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; flex-grow:1; }
.gs-srch-tool-rating { display:flex; align-items:center; gap:.375rem; font-size:.875rem; }
.gs-srch-tool-stars { color:var(--gs-orange-500); font-size:.75rem; letter-spacing:1px; }
.gs-srch-tool-score { font-weight:700; color:var(--gs-tx0); }
.gs-srch-tool-reviews { color:var(--gs-tx2); font-size:.8125rem; }
.gs-srch-tool-price { font-size:.8125rem; color:var(--gs-tx2); }
.gs-srch-tool-price .free { color:var(--gs-cs); font-weight:600; }
.gs-srch-tool-actions { display:flex; gap:.5rem; margin-top:auto; }
.gs-srch-tool-actions .gs-btn { flex:1; font-size:.8125rem; height:36px; padding:0 .875rem; }

.gs-srch-blog-list { display:flex; flex-direction:column; gap:.875rem; margin-bottom:2rem; }
.gs-srch-blog-row {
  display:flex; align-items:flex-start; gap:1rem; padding:1rem;
  background:var(--gs-sf0); border:1px solid var(--gs-bd0);
  border-radius:var(--gs-rlg); text-decoration:none; color:inherit;
  transition:border-color .15s,box-shadow .15s;
}
.gs-srch-blog-row:hover { border-color:var(--gs-cp-b); box-shadow:var(--gs-shsm); text-decoration:none; color:inherit; }
.gs-srch-blog-thumb { width:80px; height:56px; border-radius:var(--gs-rmd); background:linear-gradient(135deg,var(--gs-purple-700),var(--gs-purple-900)); flex-shrink:0; background-size:cover; background-position:center; }
.gs-srch-blog-title { font-size:.9375rem; font-weight:600; color:var(--gs-tx0); line-height:1.4; margin-bottom:.375rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.gs-srch-blog-meta { font-size:.8125rem; color:var(--gs-tx2); }

.gs-srch-empty { text-align:center; padding:4rem 2rem; }
.gs-srch-empty-icon { font-size:3rem; margin-bottom:1rem; display:block; color:var(--gs-tx2); }
.gs-srch-empty-title { font-size:1.25rem; font-weight:700; color:var(--gs-tx0); margin-bottom:.625rem; }
.gs-srch-empty-desc { font-size:.9375rem; color:var(--gs-tx2); margin-bottom:1.5rem; line-height:1.65; max-width:32rem; margin-left:auto; margin-right:auto; }
.gs-srch-empty-suggestions { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-bottom:1.5rem; }
.gs-srch-suggestion { display:inline-flex; align-items:center; gap:.375rem; padding:.4375rem 1rem; background:var(--gs-bg2); color:var(--gs-tx1); border-radius:var(--gs-rf); font-size:.875rem; font-weight:500; text-decoration:none; transition:background .12s,color .12s; }
.gs-srch-suggestion:hover { background:var(--gs-cp-s); color:var(--gs-cp-t); text-decoration:none; }

.gs-srch-reg-banner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.75rem; background:var(--gs-cp-s); border:1px solid var(--gs-cp-b); border-radius:var(--gs-rlg); padding:.875rem 1.125rem; margin-bottom:1.5rem; }
.gs-srch-reg-text { font-size:.875rem; color:var(--gs-cp-t); font-weight:500; }

.gs-srch-results-h { font-family:var(--gs-fd); font-size:1rem; font-weight:700; color:var(--gs-tx0); margin-bottom:1rem; }

.gs-srch-pagination { display:flex; align-items:center; justify-content:center; gap:.375rem; flex-wrap:wrap; margin-top:1rem; }

@media(max-width:575.98px) {
  .gs-srch-hero { padding:1.75rem 0 1.5rem; }
  .gs-srch-input { height:50px; font-size:1rem; padding:0 4.5rem 0 3rem; }
}

/* ── Mobile / small-screen auth: fit the whole card in one screen, no scroll ──
   Applies < 768px (brand panel hidden, form is full-width). Compacts vertical
   rhythm, centers the logo, and keeps the footer on a single line. */
@media (max-width: 767.98px) {
  .gs-auth-form-side { padding: 1.25rem 1.25rem; min-height: 100dvh; }

  .gs-mobile-logo    { display: flex; justify-content: center; margin-bottom: 1rem; }

  .gs-auth-title     { font-size: 1.5rem; margin-bottom: .25rem; }
  .gs-auth-sub       { margin-bottom: 1rem; }

  .gs-oauth-btn      { height: 44px; }
  .gs-auth-divider   { margin-block: .85rem; }

  .gs-field          { margin-bottom: .8rem; }
  .gs-input          { height: 44px; }

  /* slightly smaller CTA so the card clears the fold on short phones */
  .gs-auth-card .gs-btn-lg { height: 48px; font-size: .9375rem; }

  .gs-auth-footer    { font-size: .8125rem; margin-top: 1rem; }
}

/* Tablet range (576–767px): keep a real card but with tighter padding */
@media (min-width: 576px) and (max-width: 767.98px) {
  .gs-auth-card { padding: 1.75rem; }
}

/* Extra-short viewports (small phones / landscape) — squeeze a touch more */
@media (max-width: 767.98px) and (max-height: 720px) {
  .gs-auth-form-side { padding: .875rem 1.25rem; align-items: flex-start; }
  .gs-auth-sub       { margin-bottom: .75rem; }
  .gs-field          { margin-bottom: .625rem; }
  .gs-auth-divider   { margin-block: .625rem; }
}

/* Auth blob decorations */
.gs-brand-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  opacity: .18;
  pointer-events: none;
}
.gs-brand-blob-1 { width: 360px; height: 360px; top: -120px;  right: -60px; background: #C4B5FD; }
.gs-brand-blob-2 { width: 280px; height: 280px; bottom: -80px; left: -50px; background: #4ADE80; }
.gs-brand-blob-3 { width: 200px; height: 200px; top: 40%;     left: 30%;   background: #93C5FD; opacity: .10; }

/* Floating theme toggle on auth pages — icon tinted to match the brand logo */
.gs-theme-btn {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 600;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gs-sf0);
  border: 1px solid var(--gs-bd1);
  border-radius: var(--gs-rmd);
  color: var(--gs-cp);            /* brand purple — matches the logo */
  font-size: 1.0625rem;
  cursor: pointer;
  box-shadow: var(--gs-sh-sm, 0 1px 3px rgba(17,24,39,.08));
  transition: background .15s, color .15s, border-color .15s;
}
.gs-theme-btn:hover {
  background: var(--gs-cp-m, rgba(91,33,182,.08));
  color: var(--gs-cp);
  border-color: var(--gs-cp);
}
.gs-theme-btn:focus-visible { outline: none; box-shadow: var(--gs-foc); }
[data-theme="dark"] .gs-theme-btn { color: #A78BFA; }          /* lighter purple on dark */
[data-theme="dark"] .gs-theme-btn:hover { color: #C4B5FD; border-color: #A78BFA; }

/* Dark-mode brand panel — match the site's dark hero gradient (was unchanged) */
[data-theme="dark"] .gs-auth-brand {
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(124, 58, 237, .35) 0%, transparent 55%),
    radial-gradient(100% 80% at 0% 100%, rgba(61, 139, 55, .22) 0%, transparent 50%),
    linear-gradient(155deg, #1a0b3d 0%, #0C0E14 55%, #071407 100%);
}
[data-theme="dark"] .gs-brand-blob { opacity: .12; }

/* OAuth icon sizing */
.gs-oauth-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* ============================================================
 * § 21 · SEARCH OVERLAY
 * Full-screen combobox overlay triggered by goji-main.js.
 * Present on all public pages via required HTML fragment.
 *
 * JS binds to:
 *   #gs-search-overlay  role="dialog"
 *   #gs-search-input    role="combobox"  aria-expanded
 *   #gs-search-results  role="listbox"
 * ============================================================ */

.gs-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 800;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: clamp(4rem, 12vh, 8rem);
  padding-inline: 1rem;
}
.gs-search-overlay[hidden] { display: none; }

.gs-search-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
  cursor: default;
  z-index: 0;
}

.gs-search-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 42rem;
}

/* Search input row */
.gs-search {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--gs-sf0);
  border: 1.5px solid var(--gs-bd0);
  border-radius: var(--gs-rlg);
  box-shadow: var(--gs-shxl);
  overflow: hidden;
}
.gs-search-icon {
  position: absolute;
  left: 1.125rem;
  color: var(--gs-tx2);
  font-size: 1.125rem;
  pointer-events: none;
  flex-shrink: 0;
  z-index: 1;
}
#gs-search-input {
  flex: 1;
  height: 58px;
  padding: 0 6rem 0 3.25rem;
  background: transparent;
  border: none;
  font-family: var(--gs-fb);
  font-size: 1.0625rem;
  color: var(--gs-tx0);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
#gs-search-input::placeholder { color: var(--gs-tx2); }
.gs-search-clear {
  position: absolute;
  right: 4rem;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--gs-tx2);
  cursor: pointer;
  font-size: 1rem;
  padding: 0;
  border-radius: var(--gs-rmd);
  transition: color .15s, background .15s;
}
.gs-search-clear:hover { color: var(--gs-tx0); background: var(--gs-bg2); }
.gs-search-esc {
  position: absolute;
  right: .875rem;
  font-family: var(--gs-fb);
  font-size: .6875rem;
  font-weight: 600;
  color: var(--gs-tx2);
  background: var(--gs-bg2);
  border: 1px solid var(--gs-bd1);
  border-radius: var(--gs-rsm);
  padding: .1875rem .4375rem;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

/* Results dropdown */
#gs-search-results {
  margin-top: .5rem;
  background: var(--gs-sf0);
  border: 1px solid var(--gs-bd0);
  border-radius: var(--gs-rlg);
  box-shadow: var(--gs-shxl);
  max-height: min(60vh, 480px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--gs-bd0) transparent;
}
#gs-search-results[hidden] { display: none; }


/* ============================================================
 * § 22 · PAGINATION
 * Shared page button used on blog, category, search, deals.
 * ============================================================ */

.gs-page-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--gs-bd1);
  border-radius: var(--gs-rmd);
  background: var(--gs-sf0);
  font-family: var(--gs-fd);
  font-size: .875rem;
  font-weight: 500;
  color: var(--gs-tx1);
  cursor: pointer;
  text-decoration: none;
  transition: background .12s, border-color .12s, color .12s;
  flex-shrink: 0;
}
.gs-page-btn:hover { background: var(--gs-bg2); border-color: var(--gs-bd2); color: var(--gs-tx0); text-decoration: none; }
.gs-page-btn.active { background: var(--gs-cp); border-color: var(--gs-cp); color:var(--gs-cp-fg,#fff); font-weight: 700; }
.gs-page-btn:focus-visible { outline: none; box-shadow: var(--gs-foc); }
.gs-page-ellipsis {
  font-size: .875rem;
  color: var(--gs-tx2);
  padding: 0 .25rem;
  user-select: none;
}


/* ============================================================
 * § 23 · VIEW TOGGLE
 * Grid / list view toggle on blog and category pages.
 * ============================================================ */

.gs-view-toggle {
  display: flex;
  gap: 2px;
  background: var(--gs-sf2);
  border: 1px solid var(--gs-bd0);
  border-radius: var(--gs-rmd);
  padding: 2px;
}
.gs-vt-btn {
  width: 32px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--gs-rsm);
  background: none;
  color: var(--gs-tx2);
  cursor: pointer;
  font-size: .9375rem;
  transition: background .15s, color .15s;
}
.gs-vt-btn.active { background: var(--gs-sf0); color: var(--gs-cp); box-shadow: var(--gs-shsm); }
.gs-vt-btn:focus-visible { outline: none; box-shadow: var(--gs-foc); }


/* ============================================================
 * § 24 · DARK SECTION
 * Full-bleed #0a0d18 stats section used on about and pricing.
 * ============================================================ */

.gs-dark-sec {
  background: #0a0d18;
  position: relative;
  overflow: hidden;
  padding: 5rem 0;
}
.gs-dark-sec-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.gs-dark-sec-overlay::before {
  content: '';
  position: absolute;
  top: -100px; left: -80px;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91,33,182,.20) 0%, transparent 70%);
}
.gs-dark-sec-overlay::after {
  content: '';
  position: absolute;
  bottom: -80px; right: -60px;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(61,139,55,.14) 0%, transparent 70%);
}
.gs-dark-stat {
  text-align: center;
  padding: 2rem 1rem;
}
.gs-dark-stat-num {
  display: block;
  font-family: var(--gs-fd);
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  margin-bottom: .5rem;
}
.gs-dark-stat-lbl {
  font-size: .875rem;
  color: rgba(255, 255, 255, .5);
  font-weight: 500;
}
/* Column separator on md+ */
@media (min-width: 768px) {
  .gs-dark-stat + .gs-dark-stat { border-left: 1px solid rgba(255, 255, 255, .08); }
}
@media (max-width: 767.98px) {
  .gs-dark-stat { border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .gs-dark-stat:nth-child(odd)  { border-right: 1px solid rgba(255, 255, 255, .08); }
  .gs-dark-stat:nth-last-child(-n+2) { border-bottom: none; }
}


/* ============================================================
 * § 25 · DARK MODE OVERRIDES
 * Component-specific overrides for [data-theme="dark"].
 * Only needed where components use hardcoded light values.
 * ============================================================ */

/* Badge variants */
[data-theme="dark"] .gs-badge-p  { background: rgba(167, 139, 250, .20); color: #C4B5FD; }
[data-theme="dark"] .gs-badge-g  { background: rgba(61, 139, 55, .20);  color: #4ADE80; }
[data-theme="dark"] .gs-badge-b  { background: rgba(29, 78, 216, .20);  color: #93C5FD; }
[data-theme="dark"] .gs-badge-r  { background: rgba(220, 38, 38, .18);  color: #F87171; }
[data-theme="dark"] .gs-badge-y  { background: rgba(234, 179, 8, .14);  color: #FCD34D; }
[data-theme="dark"] .gs-badge-nt { background: var(--gs-sf2);           color: var(--gs-tx1); }

[data-theme="dark"] .gs-badge-hot  { background: rgba(249, 115, 22, .18); color: #FB923C; }
[data-theme="dark"] .gs-badge-new  { background: rgba(29, 78, 216, .20);  color: #93C5FD; }
[data-theme="dark"] .gs-badge-warn { background: rgba(234, 179, 8, .14);  color: #FDE68A; }
[data-theme="dark"] .gs-badge-deal { background: rgba(74, 222, 128, .15); color: #4ADE80; }

/* Save pill (pricing toggle) */
[data-theme="dark"] .gs-save-pill {
  background: rgba(74, 222, 128, .15);
  color: #4ADE80;
}

/* OTP input filled state */
[data-theme="dark"] .gs-otp-input.filled {
  background: var(--gs-cp-m);
  border-color: var(--gs-cp);
}

/* Skeleton on dark */
[data-theme="dark"] .gs-skel {
  background: linear-gradient(90deg, var(--gs-sf2) 25%, var(--gs-sf3) 50%, var(--gs-sf2) 75%);
  background-size: 200% 100%;
}

/* Eyebrow on dark */
[data-theme="dark"] .gs-eyebrow {
  background: rgba(91, 33, 182, .20);
  border-color: rgba(196, 181, 253, .30);
}

/* Nav pill on dark */
[data-theme="dark"] .gs-nav-pill {
  background: rgba(167, 139, 250, .22);
  color: #C4B5FD;
}

/* Drawer shadow on dark */
[data-theme="dark"] .gs-drawer,
[data-theme="dark"] .gs-mob-drawer {
  box-shadow: 2px 0 24px rgba(0, 0, 0, .55);
}

/* Search overlay backdrop on dark */
[data-theme="dark"] .gs-search-backdrop {
  background: rgba(0, 0, 0, .75);
}

/* Pricing card popular pip on dark */
[data-theme="dark"] .gs-popular-pip {
  background: var(--gs-cp);
}

/* Footer stays always-dark — override if light theme somehow applies */
.gs-footer { background: #0a0d18; border-top: 1px solid rgba(255,255,255,.04); }
[data-theme="dark"] .gs-footer { background: #070a12; }


/* ============================================================
 * § 26 · RESPONSIVE HELPERS
 * ============================================================ */

/* Show burger / hamburger; hide desktop nav at < 992px */
@media (max-width: 991.98px) {
  .gs-hamburger,
  .gs-burger,
  .gs-mobile-menu-btn { display: flex; }

  .gs-nav-links  { display: none !important; }
  .gs-nav-search { display: none !important; }

  /* Auth pages: show mobile logo */
  .gs-mobile-logo { display: flex; }
}

/* Tighter nav padding on small phones */
@media (max-width: 575.98px) {
  .gs-nav-inner { padding: 0 1rem; }
  .gs-otp-group { gap: .5rem; }
  .gs-otp-input { width: 42px; height: 52px; font-size: 1.25rem; }
  .gs-sec       { padding: 3rem 0; }
  .gs-dark-sec  { padding: 3rem 0; }
  .gs-footer-bottom { flex-direction: column; align-items: flex-start; }
}


/* ============================================================
 * § 27 · REDUCED MOTION
 * Single kill-switch overrides all animations and transitions.
 * ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:        .01ms !important;
    animation-iteration-count: 1    !important;
    transition-duration:       .01ms !important;
    scroll-behavior:           auto !important;
  }
}
/* ════════════════════════════════════════════════════════════════════
   GOJI PUBLIC COMPONENTS — added so view markup matches external CSS
   (hero, strip, category card, listing/blog page headers). Token names
   use literal fallbacks so they render even if a token is absent.
════════════════════════════════════════════════════════════════════ */
.gs-sec-title{font-family:var(--gs-font-display,'Plus Jakarta Sans',sans-serif);font-size:clamp(1.5rem,3vw,2rem);font-weight:800;letter-spacing:-.02em;color:var(--gs-text-primary,#111827);margin:0}
.disc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(17.5rem,1fr));gap:1.5rem}
@media(max-width:575.98px){.disc-grid{grid-template-columns:1fr}}

/* ── Hero (homepage) ── */
.gs-hero{position:relative;overflow:hidden;padding:3.5rem 0 2.5rem;background:linear-gradient(160deg,#F5F3FF 0%,#fff 45%,#F0FDF4 100%)}
[data-theme="dark"] .gs-hero{background:linear-gradient(160deg,#1a0b3d 0%,#0C0E14 45%,#071407 100%)}
.gs-hero-blobs{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.gs-blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.10}
.gs-blob-1{width:420px;height:420px;background:#5B21B6;top:-140px;right:-80px}
.gs-blob-2{width:340px;height:340px;background:#3D8B37;bottom:-120px;left:-90px}
.gs-blob-3{width:260px;height:260px;background:#1D4ED8;top:30%;left:30%}
:root{--cp:#5B21B6;--cs:#3D8B37;--or-500:#F97316}
[data-theme="dark"]{--cp:#A78BFA;--cs:#4ADE80;--or-500:#FB923C}
.gs-hero-visual{position:relative;display:none}
@media(min-width:992px){.gs-hero-visual{display:block}}
.gs-dash-card{background:var(--gs-surface-1,#fff);border:1px solid var(--gs-border-default,#E5E7EB);border-radius:1rem;box-shadow:0 20px 25px rgba(91,33,182,.09),0 8px 10px rgba(91,33,182,.05);overflow:hidden}
.gs-dash-titlebar{display:flex;align-items:center;gap:.6rem;padding:.7rem 1rem;border-bottom:1px solid var(--gs-border-subtle,#EAECF0);background:var(--gs-bg-subtle,#F9FAFB)}
.gs-dash-dots{display:flex;gap:.35rem}
.gs-dash-dot{width:10px;height:10px;border-radius:50%}
.gs-dash-dot-r{background:#ff5f57}.gs-dash-dot-y{background:#febc2e}.gs-dash-dot-g{background:#28c840}
.gs-dash-titlebar-text{font-size:.75rem;color:var(--gs-text-tertiary,#6B7280);font-weight:500}
.gs-dash-titlebar-badge{margin-left:auto;font-size:.6rem;font-weight:700;letter-spacing:.05em;color:#fff;background:#16A34A;padding:2px 7px;border-radius:9999px}
.gs-dash-body{padding:1rem}
.gs-dash-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:1rem}
.gs-dash-stat{text-align:center;background:var(--gs-bg-subtle,#F9FAFB);border:1px solid var(--gs-border-subtle,#EAECF0);border-radius:.6rem;padding:.6rem .25rem}
.gs-dash-stat-num{font-family:var(--gs-font-display,sans-serif);font-weight:800;font-size:1.25rem;line-height:1}
.gs-dash-stat-lbl{font-size:.625rem;color:var(--gs-text-tertiary,#6B7280);text-transform:uppercase;letter-spacing:.04em;margin-top:2px}
.gs-dash-tool-row{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}
.gs-dash-tool-item{display:flex;align-items:center;gap:.6rem;padding:.5rem .6rem;border:1px solid var(--gs-border-subtle,#EAECF0);border-radius:.6rem}
.gs-dash-tool-logo{width:32px;height:32px;border-radius:8px;background:var(--gs-bg-muted,#F3F4F6);display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0;font-weight:700;color:var(--gs-cp,#5B21B6)}
.gs-dash-tool-name{font-size:.8125rem;font-weight:600;color:var(--gs-text-primary,#111827)}
.gs-dash-tool-cat{font-size:.6875rem;color:var(--gs-text-tertiary,#6B7280)}
.gs-dash-tool-rating{margin-left:auto;font-size:.75rem;font-weight:600;color:var(--gs-text-primary,#111827);white-space:nowrap}
.gs-dash-tool-rating i{color:#F97316;font-size:.7rem}
.gs-dash-cats{display:flex;flex-wrap:wrap;gap:.35rem}
.gs-dash-cat-chip{font-size:.6875rem;padding:.25rem .6rem;border-radius:9999px;background:var(--gs-bg-muted,#F3F4F6);color:var(--gs-text-secondary,#374151)}
.gs-dash-cat-chip.active{background:var(--gs-cp,#5B21B6);color:var(--gs-cp-fg,#fff)}
.gs-float-badge{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:.4rem;background:var(--gs-surface-1,#fff);border:1px solid var(--gs-border-default,#E5E7EB);box-shadow:0 10px 15px rgba(0,0,0,.08);border-radius:9999px;padding:.45rem .85rem;font-size:.7rem;font-weight:600;color:var(--gs-text-primary,#111827)}
.gs-float-1{top:-14px;left:-14px}
.gs-float-2{bottom:-14px;right:-14px}
.gs-eyebrow-badge{display:inline-flex;align-items:center;gap:.4rem;font-size:.8125rem;font-weight:600;color:var(--gs-cp,#5B21B6);background:var(--gs-cp-s,#F5F3FF);border:1px solid var(--gs-cp-b,#DDD6FE);padding:.35rem .85rem;border-radius:9999px;margin-bottom:1rem}
.gs-h1{font-family:var(--gs-font-display,'Plus Jakarta Sans',sans-serif);font-size:clamp(2rem,5vw,3.25rem);font-weight:800;letter-spacing:-.03em;line-height:1.1;color:var(--gs-text-primary,#111827);margin:0 0 1rem}
.gs-h1-accent{color:var(--gs-cp,#5B21B6)}
.gs-h1-green{color:var(--gs-cs,#3D8B37)}
.gs-hero-lead{font-size:1.0625rem;line-height:1.6;color:var(--gs-text-secondary,#374151);max-width:36rem;margin:0 0 1.5rem}
.gs-hero-search-wrap{position:relative;max-width:36rem;margin-bottom:1.25rem}
.gs-hs-icon{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:var(--gs-text-tertiary,#6B7280);z-index:1}
.gs-hs-input{width:100%;height:56px;border:2px solid var(--gs-border-default,#E5E7EB);border-radius:9999px;padding:0 9rem 0 2.75rem;font-size:1rem;background:#fff;color:#111827;box-shadow:0 10px 15px rgba(91,33,182,.06);outline:none}
.gs-hs-input:focus{border-color:var(--gs-cp,#5B21B6);box-shadow:0 0 0 3px rgba(91,33,182,.25)}
.gs-hs-btn-wrap{position:absolute;right:6px;top:50%;transform:translateY(-50%)}
.gs-hero-cta-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1.25rem}
.gs-hero-hints{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:.8125rem;color:var(--gs-text-tertiary,#6B7280)}
.gs-hints-lbl{font-weight:600}
.gs-hint-chip{display:inline-flex;align-items:center;gap:.25rem;background:#fff;border:1px solid var(--gs-border-default,#E5E7EB);border-radius:9999px;padding:.3rem .8rem;font-size:.75rem;font-weight:500;color:var(--gs-text-secondary,#374151);text-decoration:none}
.gs-hint-chip:hover{border-color:var(--gs-cp-b,#DDD6FE);color:var(--gs-cp,#5B21B6)}
.gs-trust-row{display:flex;flex-wrap:wrap;gap:1.25rem;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--gs-border-subtle,#EAECF0)}
.gs-trust-item{display:flex;align-items:center;gap:.4rem;font-size:.8125rem;color:var(--gs-text-tertiary,#6B7280)}
.gs-trust-item i{color:var(--gs-cs,#3D8B37)}

/* ── Social-proof strip ── */
.gs-strip{background:#0a0d18;padding:1.75rem 0}
.gs-strip-item{text-align:center;padding:.5rem 0}
.gs-strip-val{display:block;font-family:var(--gs-font-display,sans-serif);font-size:1.75rem;font-weight:800;color:#fff;line-height:1}
.gs-strip-val em{font-style:normal}
.gs-strip-lbl{font-size:.8125rem;color:rgba(255,255,255,.55)}

/* ── Category card (home) ── */
.gs-cat-card{display:flex;flex-direction:column;background:var(--gs-surface-1,#fff);border:1px solid var(--gs-border-default,#E5E7EB);border-radius:1rem;padding:1.5rem;text-decoration:none;height:100%;transition:transform .2s,box-shadow .2s,border-color .2s}
.gs-cat-card:hover{
	transform:translateY(-3px);box-shadow:var(--gs-shadow-lg,0 10px 15px rgba(91,33,182,.08));border-color:var(--gs-cp-b,#DDD6FE);
	text-decoration:none;
}
.gs-cat-card .gs-cat-icon{width:48px;height:48px;border-radius:.6rem;display:flex;align-items:center;justify-content:center;font-size:1.4rem;background:var(--gs-cp-s,#F5F3FF);color:var(--gs-cp,#5B21B6);margin-bottom:1rem}
.gs-cat-name{font-family:var(--gs-font-display,sans-serif);font-weight:700;font-size:.9375rem;color:var(--gs-text-primary,#111827);margin-bottom:.375rem}
.gs-cat-count{margin-top:auto;font-size:.75rem;color:var(--gs-text-tertiary,#6B7280)}

/* ── Page headers: listings / search / category / blog ── */
.disc-hero,.gs-cat-hero,.gs-blog-hero,.gs-art-hero{padding:2rem 0 1.5rem;background:var(--gs-bg-subtle,#F9FAFB);border-bottom:1px solid var(--gs-border-subtle,#EAECF0)}
.disc-h1,.gs-cat-h1{font-family:var(--gs-font-display,sans-serif);font-size:clamp(1.5rem,3vw,2.25rem);font-weight:800;letter-spacing:-.025em;color:var(--gs-text-primary,#111827);margin:0 0 .5rem}
.disc-hero-lead,.gs-cat-lead{font-size:1rem;color:var(--gs-text-secondary,#374151);margin:0;max-width:42rem}
.gs-subcat-strip{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0 0}
.gs-subcat-chip{display:inline-flex;background:#fff;border:1px solid var(--gs-border-default,#E5E7EB);border-radius:9999px;padding:.3rem .85rem;font-size:.8125rem;color:var(--gs-text-secondary,#374151);text-decoration:none}
.gs-subcat-chip:hover{border-color:var(--gs-cp-b,#DDD6FE);color:var(--gs-cp,#5B21B6)}
.gs-blog-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.gs-blog-tabs a,.gs-blog-tab{display:inline-flex;padding:.4rem .9rem;border-radius:9999px;border:1px solid var(--gs-border-default,#E5E7EB);background:#fff;font-size:.8125rem;color:var(--gs-text-secondary,#374151);text-decoration:none}
.gs-blog-tabs a.active,.gs-blog-tab.active{background:var(--gs-cp,#5B21B6);border-color:var(--gs-cp,#5B21B6);color:var(--gs-cp-fg,#fff)}

/* ── Homepage Benefits (S09) + Testimonials (S11) — match index.html ── */
.gs-ben-card{background:var(--gs-surface-1,#fff);border:1px solid var(--gs-border-default,#E5E7EB);border-radius:1rem;padding:1.75rem;height:100%;transition:box-shadow .2s,border-color .2s}
.gs-ben-card:hover{box-shadow:var(--gs-shadow-md,0 4px 6px rgba(91,33,182,.07));border-color:var(--gs-cp-b,#DDD6FE)}
.gs-ben-icon{width:52px;height:52px;border-radius:.75rem;display:flex;align-items:center;justify-content:center;font-size:1.375rem;margin-bottom:1.125rem}
.gs-ben-title{font-family:var(--gs-font-display,sans-serif);font-size:1.0625rem;font-weight:700;color:var(--gs-text-primary,#111827);margin-bottom:.625rem}
.gs-ben-desc{font-size:.9375rem;color:var(--gs-text-secondary,#374151);line-height:1.65}
.gs-stat-card{text-align:center;padding:2rem 1rem}
.gs-testi{background:var(--gs-surface-1,#fff);border:1px solid var(--gs-border-default,#E5E7EB);border-radius:1rem;padding:1.75rem;display:flex;flex-direction:column;height:100%;transition:box-shadow .2s}
.gs-testi:hover{box-shadow:var(--gs-shadow-lg,0 10px 15px rgba(91,33,182,.08))}
.gs-testi-stars{display:flex;gap:.25rem;margin-bottom:1rem}
.gs-testi-stars i{color:#F97316;font-size:.875rem}
.gs-testi-quote{font-style:italic;font-size:.9375rem;color:var(--gs-text-secondary,#374151);line-height:1.65;flex:1;position:relative;padding-top:1.25rem;margin-bottom:1.25rem}
.gs-testi-quote::before{content:"\201C";position:absolute;top:-.5rem;left:0;font-family:var(--gs-font-display,serif);font-size:2.5rem;font-weight:800;font-style:normal;color:var(--gs-cp,#5B21B6);line-height:1;opacity:.35}
.gs-testi-author{display:flex;align-items:center;gap:.875rem;margin-top:auto}
.gs-testi-name{font-family:var(--gs-font-display,sans-serif);font-size:.875rem;font-weight:700;color:var(--gs-text-primary,#111827)}
.gs-testi-role{font-size:.75rem;color:var(--gs-text-tertiary,#6B7280)}

/* ── 404 page (from html_themes/404.html) ── */
.gs-404-wrap{min-height:calc(100vh - var(--gs-nh,64px) - 260px);display:flex;align-items:center;justify-content:center;padding:4rem 1.5rem}
.gs-404-inner{text-align:center;max-width:36rem}
.gs-404-code{font-family:var(--gs-fd,'Plus Jakarta Sans',sans-serif);font-size:clamp(5rem,20vw,8rem);font-weight:800;letter-spacing:-.04em;line-height:1;margin-bottom:.5rem;background:linear-gradient(135deg,var(--gs-purple-300,#C4B5FD),var(--gs-purple-600,#7C3AED));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.gs-404-icon{font-size:3rem;margin-bottom:1.25rem;display:block}
.gs-404-title{font-size:clamp(1.5rem,3vw,2rem);font-weight:800;color:var(--gs-tx0,#111827);margin-bottom:.875rem}
.gs-404-desc{font-size:1.0625rem;color:var(--gs-tx2,#6B7280);line-height:1.7;margin-bottom:2rem}
.gs-404-actions{display:flex;align-items:center;justify-content:center;gap:.75rem;flex-wrap:wrap;margin-bottom:2.5rem}
.gs-404-search{position:relative;max-width:28rem;margin:0 auto 2.5rem}
.gs-404-search-icon{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:var(--gs-tx2,#6B7280);font-size:1.125rem;pointer-events:none}
.gs-404-search-input{width:100%;height:52px;padding:0 4.5rem 0 3rem;border:1.5px solid var(--gs-bd1,#E5E7EB);border-radius:var(--gs-rf,9999px);background:var(--gs-sf0,#fff);font-family:var(--gs-fb,'DM Sans',sans-serif);font-size:1rem;color:var(--gs-tx0,#111827);outline:none;transition:border-color .15s,box-shadow .15s}
.gs-404-search-input:focus{border-color:var(--gs-cp,#5B21B6);box-shadow:var(--gs-foc,0 0 0 3px rgba(91,33,182,.35))}
.gs-404-search-input::placeholder{color:var(--gs-tx2,#6B7280)}
.gs-404-search-btn{position:absolute;right:.375rem;top:.375rem;height:calc(100% - .75rem);padding:0 1.125rem;background:var(--gs-cp,#5B21B6);color:var(--gs-cp-fg,#fff);border:none;border-radius:var(--gs-rf,9999px);font-family:var(--gs-fd,sans-serif);font-size:.875rem;font-weight:600;cursor:pointer;transition:background .15s}
.gs-404-search-btn:hover{background:var(--gs-cp-h,#6D28D9)}
.gs-404-popular-title{font-size:.875rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--gs-tx2,#6B7280);margin-bottom:1.25rem}
.gs-404-tools{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;text-align:left}
@media(min-width:480px){.gs-404-tools{grid-template-columns:repeat(4,1fr)}}
.gs-404-tool{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.875rem .5rem;background:var(--gs-sf1,#fff);border:1px solid var(--gs-bd0,#EAECF0);border-radius:var(--gs-rlg,.75rem);text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s;text-align:center}
.gs-404-tool:hover{border-color:var(--gs-cp-b,#DDD6FE);box-shadow:var(--gs-shsm,0 1px 3px rgba(91,33,182,.06));text-decoration:none;color:inherit}
.gs-404-tool-logo{width:40px;height:40px;border-radius:var(--gs-rmd,.5rem);background:var(--gs-bg2,#F3F4F6);display:flex;align-items:center;justify-content:center;font-size:1.5rem;overflow:hidden}
.gs-404-tool-name{font-size:.8125rem;font-weight:600;color:var(--gs-tx0,#111827)}
.gs-404-tool-cat{font-size:.75rem;color:var(--gs-tx2,#6B7280)}

/* ── About page (from html_themes/about.html) ── */
.gs-about-hero{
  position:relative;overflow:hidden;
  background:linear-gradient(155deg,#F5F3FF 0%,#FFFFFF 50%,#F0FDF4 100%);
  padding:5rem 0 4.5rem;
}
[data-theme="dark"] .gs-about-hero{
  background:linear-gradient(155deg,#1a0b3d 0%,#0C0E14 50%,#071407 100%);
}
.gs-about-hero-blobs{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.gs-about-blob{
  position:absolute;border-radius:50%;
  filter:blur(80px);opacity:.06;
}
[data-theme="dark"] .gs-about-blob{opacity:.15}
.gs-about-blob-1{width:600px;height:600px;background:#5B21B6;top:-220px;right:-100px}
.gs-about-blob-2{width:400px;height:400px;background:#3D8B37;bottom:-150px;left:-80px}
.gs-about-blob-3{width:300px;height:300px;background:#1D4ED8;top:40%;left:40%}

.gs-about-eyebrow{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.8125rem;font-weight:600;color:var(--gs-cp-t);
  background:var(--gs-cp-s);border:1px solid var(--gs-cp-b);
  border-radius:var(--gs-rf);padding:.375rem 1rem;margin-bottom:1.5rem;
}
[data-theme="dark"] .gs-about-eyebrow{
  background:rgba(91,33,182,.16);border-color:rgba(167,139,250,.32);
}
.gs-about-h1{
  font-size:clamp(2.25rem,5vw,3.75rem);font-weight:800;
  letter-spacing:-.04em;line-height:1.08;
  color:var(--gs-tx0);margin-bottom:1.375rem;
}
.gs-about-h1 .acc-p{color:var(--gs-cp)}
.gs-about-h1 .acc-g{color:var(--gs-cs)}
.gs-about-lead{
  font-size:1.125rem;color:var(--gs-tx1);line-height:1.7;
  max-width:600px;margin-bottom:2rem;
}
.gs-about-hero-stats{
  display:flex;flex-wrap:wrap;gap:2rem;margin-top:2.5rem;
  padding-top:2rem;border-top:1px solid var(--gs-bd0);
}
.gs-about-hero-stat-num{
  font-family:var(--gs-fd);font-size:1.875rem;font-weight:800;
  letter-spacing:-.035em;line-height:1;color:var(--gs-tx0);
}
.gs-about-hero-stat-num em{color:var(--gs-cp);font-style:normal}
.gs-about-hero-stat-lbl{
  font-size:.75rem;color:var(--gs-tx2);margin-top:.25rem;
}
/* About hero right: mission card */
.gs-about-mission-card{
  background:var(--gs-sf0);border:1px solid var(--gs-bd1);
  border-radius:var(--gs-rxl);padding:2rem;
  box-shadow:var(--gs-shxl);
}
.gs-mission-icon{
  width:52px;height:52px;border-radius:var(--gs-rlg);
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;margin-bottom:1.25rem;
}
.gs-mission-label{
  font-size:.625rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;color:var(--gs-cp-t);margin-bottom:.5rem;
}
.gs-mission-text{
  font-size:1rem;font-weight:600;color:var(--gs-tx0);
  line-height:1.55;margin-bottom:1.25rem;
  font-style:italic;
}
.gs-mission-divider{height:1px;background:var(--gs-bd0);margin:1.25rem 0}
.gs-mission-attrs{display:flex;flex-direction:column;gap:.75rem}
.gs-mission-attr{display:flex;align-items:flex-start;gap:.625rem}
.gs-mission-attr i{color:var(--gs-cs);font-size:1rem;margin-top:1px;flex-shrink:0}
.gs-mission-attr-text{font-size:.875rem;color:var(--gs-tx1);line-height:1.5}
.gs-mission-attr-text strong{color:var(--gs-tx0);font-weight:600}

/* ══════════════════════════════════════════════════════════════════
   SECTION SHARED SYSTEM
══════════════════════════════════════════════════════════════════ */
.gs-sec{padding:5rem 0;background:var(--gs-bg0)}
.gs-sec-alt{background:var(--gs-bg1)}
.gs-sec-hdr{margin-bottom:3rem}
.gs-eyebrow{
  display:inline-block;font-size:.75rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;
  color:var(--gs-cp);margin-bottom:.625rem;
}
.gs-sec-h2{
  font-size:clamp(1.875rem,3.5vw,2.625rem);
  font-weight:800;letter-spacing:-.03em;line-height:1.15;
  color:var(--gs-tx0);margin-bottom:.75rem;
}
.gs-sec-sub{
  font-size:1.0625rem;color:var(--gs-tx1);
  line-height:1.65;
}

/* ══════════════════════════════════════════════════════════════════
   STORY SECTION — timeline
══════════════════════════════════════════════════════════════════ */
.gs-story-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:3rem;align-items:center;
}
@media(max-width:767.98px){.gs-story-grid{grid-template-columns:1fr}}

.gs-story-text p{
  font-size:1rem;color:var(--gs-tx1);line-height:1.75;margin-bottom:1rem;
}
.gs-story-text p:last-child{margin-bottom:0}
.gs-story-text strong{color:var(--gs-tx0);font-weight:600}

/* Timeline card stack (right side of story) */
.gs-timeline{display:flex;flex-direction:column;gap:0}
.gs-tl-item{
  display:flex;gap:1.25rem;padding:1.25rem 0;
  border-bottom:1px solid var(--gs-bd0);
}
.gs-tl-item:last-child{border-bottom:none;padding-bottom:0}
.gs-tl-item:first-child{padding-top:0}
.gs-tl-dot-wrap{
  display:flex;flex-direction:column;align-items:center;
  flex-shrink:0;padding-top:4px;
}
.gs-tl-dot{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.875rem;font-weight:700;flex-shrink:0;
  font-family:var(--gs-fd);
}
.gs-tl-line{width:1px;flex:1;background:var(--gs-bd0);margin-top:8px}
.gs-tl-item:last-child .gs-tl-line{display:none}
.gs-tl-year{
  font-size:.6875rem;font-weight:700;color:var(--gs-tx2);
  text-transform:uppercase;letter-spacing:.07em;margin-bottom:.3rem;
}
.gs-tl-title{
  font-family:var(--gs-fd);font-size:.9375rem;font-weight:700;
  color:var(--gs-tx0);margin-bottom:.3rem;
}
.gs-tl-desc{font-size:.875rem;color:var(--gs-tx1);line-height:1.5}

/* ══════════════════════════════════════════════════════════════════
   VALUES SECTION — 4-card grid
══════════════════════════════════════════════════════════════════ */
.gs-value-card{
  background:var(--gs-sf1);border:1px solid var(--gs-bd1);
  border-radius:var(--gs-rxl);padding:1.75rem;
  transition:box-shadow .2s,border-color .2s,transform .2s;
}
.gs-value-card:hover{
  box-shadow:var(--gs-shlg);
  border-color:var(--gs-cp-b);
  transform:translateY(-2px);
}
.gs-value-icon{
  width:52px;height:52px;border-radius:var(--gs-rlg);
  display:flex;align-items:center;justify-content:center;
  font-size:1.375rem;margin-bottom:1.125rem;
}
.gs-value-title{
  font-family:var(--gs-fd);font-size:1.0625rem;font-weight:700;
  color:var(--gs-tx0);margin-bottom:.625rem;
}
.gs-value-desc{font-size:.9375rem;color:var(--gs-tx1);line-height:1.65}

/* ══════════════════════════════════════════════════════════════════
   STATS DARK SECTION
══════════════════════════════════════════════════════════════════ */
.gs-dark-sec{
  background:#0a0d18;position:relative;overflow:hidden;padding:5rem 0;
}
.gs-dark-sec-overlay{position:absolute;inset:0;pointer-events:none}
.gs-dark-sec-overlay::before{
  content:'';position:absolute;top:-100px;left:-80px;
  width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle,rgba(91,33,182,.22) 0%,transparent 70%);
}
.gs-dark-sec-overlay::after{
  content:'';position:absolute;bottom:-80px;right:-60px;
  width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle,rgba(61,139,55,.15) 0%,transparent 70%);
}
.gs-dark-stat{text-align:center;padding:2rem 1rem}
@media(min-width:768px){
  .gs-dark-stat+.gs-dark-stat{border-left:1px solid rgba(255,255,255,.08)}
}
@media(max-width:767.98px){
  .gs-dark-stat{border-bottom:1px solid rgba(255,255,255,.08)}
  .gs-dark-stat:nth-child(odd){border-right:1px solid rgba(255,255,255,.08)}
  .gs-dark-stat:nth-last-child(-n+2){border-bottom:none}
}
.gs-dark-stat-num{
  display:block;font-family:var(--gs-fd);
  font-size:clamp(2.25rem,5vw,3.5rem);
  font-weight:800;letter-spacing:-.04em;line-height:1;margin-bottom:.5rem;
}
.gs-dark-stat-lbl{font-size:.875rem;color:rgba(255,255,255,.5);font-weight:500}

/* ══════════════════════════════════════════════════════════════════
   TEAM SECTION
══════════════════════════════════════════════════════════════════ */
.gs-team-card{
  background:var(--gs-sf1);border:1px solid var(--gs-bd1);
  border-radius:var(--gs-rxl);padding:1.75rem;text-align:center;
  transition:box-shadow .2s,border-color .2s,transform .2s;
}
.gs-team-card:hover{
  box-shadow:var(--gs-shlg);border-color:var(--gs-cp-b);
  transform:translateY(-3px);
}
.gs-team-avatar{
  width:80px;height:80px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--gs-fd);font-size:1.5rem;font-weight:800;
  color:#fff;margin:0 auto 1.125rem;flex-shrink:0;
}
.gs-team-name{
  font-family:var(--gs-fd);font-size:1rem;font-weight:700;
  color:var(--gs-tx0);margin-bottom:.25rem;
}
.gs-team-role{
  font-size:.8125rem;color:var(--gs-cp-t);font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:.75rem;
}
.gs-team-bio{
  font-size:.875rem;color:var(--gs-tx1);line-height:1.6;
  margin-bottom:1rem;
}
.gs-team-socials{display:flex;justify-content:center;gap:.5rem}
.gs-team-soc{
  width:32px;height:32px;border-radius:var(--gs-rmd);
  display:flex;align-items:center;justify-content:center;
  background:var(--gs-bg2);color:var(--gs-tx2);font-size:.875rem;
  text-decoration:none;transition:background .15s,color .15s;
}
.gs-team-soc:hover{background:var(--gs-cp-s);color:var(--gs-cp-t)}

/* ══════════════════════════════════════════════════════════════════
   HOW IT WORKS — 3-step visual
══════════════════════════════════════════════════════════════════ */
.gs-how-step{
  background:var(--gs-sf1);border:1px solid var(--gs-bd1);
  border-radius:var(--gs-rxl);padding:2rem;position:relative;
  transition:box-shadow .2s,border-color .2s;
}
.gs-how-step:hover{
  box-shadow:var(--gs-shlg);border-color:var(--gs-cp-b);
}
.gs-how-num{
  position:absolute;top:-16px;left:1.75rem;
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--gs-fd);font-size:.875rem;font-weight:800;
  color:var(--gs-cp-fg,#fff);background:var(--gs-cp);
  box-shadow:0 4px 12px rgba(91,33,182,.3);
}
.gs-how-icon{
  width:56px;height:56px;border-radius:var(--gs-rlg);
  display:flex;align-items:center;justify-content:center;
  font-size:1.625rem;margin-bottom:1.25rem;
  border:1px solid var(--gs-bd0);
}
.gs-how-title{
  font-family:var(--gs-fd);font-size:1.0625rem;font-weight:700;
  color:var(--gs-tx0);margin-bottom:.625rem;
}
.gs-how-desc{font-size:.9375rem;color:var(--gs-tx1);line-height:1.65}

/* ══════════════════════════════════════════════════════════════════
   PRESS / TRUST LOGOS
══════════════════════════════════════════════════════════════════ */
.gs-press-label{
  font-size:.6875rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;color:var(--gs-tx2);margin-bottom:1.5rem;
  text-align:center;
}
.gs-press-logos{
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:2rem;
}
.gs-press-logo{
  font-family:var(--gs-fd);font-size:1rem;font-weight:800;
  color:var(--gs-tx2);letter-spacing:-.02em;opacity:.45;
  filter:grayscale(1);transition:opacity .2s,filter .2s;
  user-select:none;
}
.gs-press-logo:hover{opacity:.8;filter:none}

/* ══════════════════════════════════════════════════════════════════
   CTA SECTION
══════════════════════════════════════════════════════════════════ */
.gs-about-cta{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,#5B21B6 0%,#3B21B6 100%);
  padding:5rem 0;
}
.gs-about-cta::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 72% 50%,rgba(255,255,255,.09),transparent 55%);
  pointer-events:none;
}
.gs-about-cta-blob{
  position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;
}
.gs-about-cta-blob-1{
  width:400px;height:400px;top:-150px;right:-60px;
  background:rgba(255,255,255,.06);
}
.gs-about-cta-blob-2{
  width:300px;height:300px;bottom:-100px;left:-40px;
  background:rgba(255,255,255,.04);
}
.gs-about-cta-h2{
  font-family:var(--gs-fd);
  font-size:clamp(1.875rem,3.5vw,2.75rem);
  font-weight:800;letter-spacing:-.03em;line-height:1.15;
  color:#fff;margin-bottom:1rem;
}
.gs-about-cta-sub{
  font-size:1.0625rem;color:rgba(255,255,255,.75);
  line-height:1.65;max-width:520px;margin-bottom:2rem;
}
.gs-btn-white{
  background:#fff;border:2px solid #fff;color:var(--gs-purple-800);
  font-family:var(--gs-fd);font-weight:700;font-size:1rem;
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  height:52px;padding:0 1.75rem;border-radius:var(--gs-rf);
  text-decoration:none;transition:background .18s,box-shadow .18s,transform .1s;
  box-shadow:0 4px 16px rgba(0,0,0,.18);
}
.gs-btn-white:hover{background:#F5F3FF;color:var(--gs-purple-800);text-decoration:none}
.gs-btn-white:active{transform:translateY(1px)}
.gs-btn-white-outline{
  background:transparent;border:2px solid rgba(255,255,255,.45);color:#fff;
  font-family:var(--gs-fd);font-weight:600;font-size:.9375rem;
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  height:52px;padding:0 1.5rem;border-radius:var(--gs-rf);
  text-decoration:none;transition:background .18s,border-color .18s,transform .1s;
}
.gs-btn-white-outline:hover{
  background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.7);
  color:#fff;text-decoration:none;
}

/* ════════════════════════════════════════════════════════════
   BLOG INDEX + BLOG DETAIL — component CSS extracted verbatim from
   html_themes/blog.html + blog-detail.html inline <style> (were inline-only).
════════════════════════════════════════════════════════════ */
/* Blog hero */
.gs-blog-hero-blobs{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.gs-blog-blob{position:absolute;border-radius:50%;filter:blur(72px);opacity:.07}
[data-theme="dark"] .gs-blog-blob{opacity:.14}
.gs-blog-blob-1{width:440px;height:440px;background:#5B21B6;top:-160px;right:-60px}
.gs-blog-blob-2{width:300px;height:300px;background:#3D8B37;bottom:-100px;left:-40px}
.gs-blog-eyebrow{display:inline-flex;align-items:center;gap:.4rem;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--gs-cp-t);background:var(--gs-cp-s);border:1px solid var(--gs-cp-b);border-radius:var(--gs-rf);padding:.3rem .875rem;margin-bottom:1rem}
[data-theme="dark"] .gs-blog-eyebrow{background:rgba(91,33,182,.16);border-color:rgba(167,139,250,.32)}
.gs-blog-h1{font-size:clamp(2rem,4vw,3rem);font-weight:800;letter-spacing:-.04em;line-height:1.1;color:var(--gs-tx0);margin-bottom:.875rem}
.gs-blog-h1 .acc{color:var(--gs-cp)}
.gs-blog-lead{font-size:1.0625rem;color:var(--gs-tx1);line-height:1.7;max-width:580px;margin-bottom:1.75rem}
.gs-blog-search-form{display:flex;gap:.5rem;max-width:520px}
.gs-blog-search-wrap{position:relative;flex:1}
.gs-blog-search-icon{position:absolute;left:.875rem;top:50%;transform:translateY(-50%);color:var(--gs-tx2);font-size:1rem;pointer-events:none}
.gs-blog-search-input{width:100%;height:48px;padding:0 1rem 0 2.75rem;border:1.5px solid var(--gs-bd1);border-radius:var(--gs-rf);background:var(--gs-sf0);font-family:var(--gs-fb);font-size:.9375rem;color:var(--gs-tx0);outline:none;transition:border-color .18s,box-shadow .18s}
.gs-blog-search-input::placeholder{color:var(--gs-tx2)}
.gs-blog-search-input:focus{border-color:var(--gs-cp);box-shadow:var(--gs-foc)}
.gs-blog-stats{display:flex;flex-wrap:wrap;gap:1.5rem;margin-top:1.5rem;font-size:.875rem;color:var(--gs-tx2)}
.gs-blog-stat{display:flex;align-items:center;gap:.375rem}
.gs-blog-stat strong{color:var(--gs-tx0);font-weight:700}
.gs-blog-stat i{font-size:.875rem;color:var(--gs-cp)}
/* Featured article */
.gs-feat-article{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--gs-sf1);border:1px solid var(--gs-bd1);border-radius:var(--gs-r2xl);overflow:hidden;text-decoration:none;transition:box-shadow .2s,transform .2s}
.gs-feat-article:hover{box-shadow:var(--gs-shxl);transform:translateY(-2px);text-decoration:none}
.gs-feat-article:focus-visible{outline:none;box-shadow:var(--gs-foc)}
@media(max-width:767.98px){.gs-feat-article{grid-template-columns:1fr}}
.gs-feat-thumb{height:100%;min-height:280px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
@media(max-width:767.98px){.gs-feat-thumb{min-height:200px}}
.gs-feat-thumb-emoji{font-size:5rem;z-index:1}
.gs-feat-body{padding:2rem;display:flex;flex-direction:column;justify-content:center}
.gs-feat-cat{display:inline-flex;align-items:center;gap:.25rem;font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--gs-cp-t);margin-bottom:.875rem}
.gs-feat-title{font-family:var(--gs-fd);font-size:clamp(1.25rem,2.5vw,1.75rem);font-weight:800;letter-spacing:-.03em;line-height:1.25;color:var(--gs-tx0);margin-bottom:.875rem}
.gs-feat-excerpt{font-size:.9375rem;color:var(--gs-tx1);line-height:1.65;margin-bottom:1.25rem}
.gs-feat-meta{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.gs-author-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--gs-fd);font-size:.75rem;font-weight:700;color:#fff;flex-shrink:0}
.gs-feat-meta-text{font-size:.8125rem;color:var(--gs-tx2);line-height:1.4}
.gs-feat-meta-text strong{color:var(--gs-tx0);display:block;font-weight:600}
/* Card reading-time badge */
.gs-thumb-badge{position:absolute;top:.75rem;right:.75rem;background:rgba(255,255,255,.85);color:var(--gs-tx1);font-size:.6875rem;font-weight:600;padding:3px 8px;border-radius:var(--gs-rf);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
[data-theme="dark"] .gs-thumb-badge{background:rgba(0,0,0,.5);color:var(--gs-tx0)}
/* List view card */
.gs-blog-list-item{display:flex;gap:1.25rem;align-items:flex-start;padding:1.25rem;background:var(--gs-sf1);border:1px solid var(--gs-bd1);border-radius:var(--gs-rxl);text-decoration:none;transition:box-shadow .2s,border-color .2s,transform .15s}
.gs-blog-list-item:hover{box-shadow:var(--gs-shmd);border-color:var(--gs-cp-b);transform:translateX(3px);text-decoration:none}
.gs-blog-list-item:focus-visible{outline:none;box-shadow:var(--gs-foc)}
.gs-blog-list-thumb{width:100px;height:80px;border-radius:var(--gs-rlg);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:2rem;overflow:hidden}
.gs-blog-list-body{flex:1;min-width:0}
.gs-blog-list-cat{font-size:.625rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--gs-cp-t);margin-bottom:.375rem}
.gs-blog-list-title{font-family:var(--gs-fd);font-size:.9375rem;font-weight:700;color:var(--gs-tx0);line-height:1.35;margin-bottom:.375rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gs-blog-list-excerpt{font-size:.8125rem;color:var(--gs-tx1);line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:.5rem}
.gs-blog-list-meta{font-size:.75rem;color:var(--gs-tx2)}
/* Sidebar */
.gs-sidebar-block{background:var(--gs-sf1);border:1px solid var(--gs-bd1);border-radius:var(--gs-rxl);padding:1.25rem;margin-bottom:1.25rem}
.gs-sidebar-block:last-child{margin-bottom:0}
.gs-sb-title{font-family:var(--gs-fd);font-size:.9375rem;font-weight:700;color:var(--gs-tx0);margin-bottom:1rem;padding-bottom:.625rem;border-bottom:1px solid var(--gs-bd0);display:flex;align-items:center;gap:.5rem}
.gs-sb-title i{color:var(--gs-cp);font-size:.9375rem}
.gs-sb-post{display:flex;gap:.75rem;padding:.5rem 0;border-bottom:1px solid var(--gs-bd0);text-decoration:none}
.gs-sb-post:last-child{border-bottom:none;padding-bottom:0}
.gs-sb-post:hover .gs-sb-post-title{color:var(--gs-cp-h)}
.gs-sb-post-num{font-family:var(--gs-fd);font-size:1.25rem;font-weight:800;color:var(--gs-bd1);flex-shrink:0;width:24px;line-height:1.2}
.gs-sb-post-title{font-family:var(--gs-fd);font-size:.875rem;font-weight:600;color:var(--gs-tx0);line-height:1.4;transition:color .15s;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gs-sb-post-meta{font-size:.6875rem;color:var(--gs-tx2);margin-top:2px}
.gs-sb-cats{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.25rem}
.gs-sb-cat-item{display:flex;align-items:center;justify-content:space-between;padding:.4375rem .625rem;border-radius:var(--gs-rmd);text-decoration:none;transition:background .15s}
.gs-sb-cat-item:hover{background:var(--gs-bg2);text-decoration:none}
.gs-sb-cat-item:focus-visible{outline:none;box-shadow:var(--gs-foc)}
.gs-sb-cat-name{display:flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:500;color:var(--gs-tx1)}
.gs-sb-cat-name i{font-size:.875rem;color:var(--gs-cp)}
.gs-sb-cat-count{font-size:.75rem;color:var(--gs-tx2);font-weight:500}
/* ── BLOG DETAIL ── */
.gs-art-hero{padding:3rem 0 0;border-bottom:1px solid var(--gs-bd0)}
.gs-art-hero-inner{max-width:820px}
.gs-art-category{display:inline-flex;align-items:center;gap:.3rem;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--gs-cp-t);margin-bottom:.875rem}
.gs-art-h1{font-size:clamp(1.875rem,4vw,2.875rem);font-weight:800;letter-spacing:-.04em;line-height:1.15;color:var(--gs-tx0);margin-bottom:1rem}
.gs-art-excerpt{font-size:1.125rem;color:var(--gs-tx1);line-height:1.7;margin-bottom:1.5rem;max-width:700px}
.gs-art-meta{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:1.25rem 0;border-top:1px solid var(--gs-bd0)}
.gs-art-author{display:flex;align-items:center;gap:.625rem}
.gs-art-author-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--gs-fd);font-size:.875rem;font-weight:700;color:#fff;flex-shrink:0}
.gs-art-author-name{font-family:var(--gs-fd);font-size:.875rem;font-weight:700;color:var(--gs-tx0)}
.gs-art-author-role{font-size:.75rem;color:var(--gs-tx2)}
.gs-art-meta-divider{width:1px;height:28px;background:var(--gs-bd0)}
.gs-art-meta-item{display:flex;align-items:center;gap:.375rem;font-size:.8125rem;color:var(--gs-tx2)}
.gs-art-meta-item i{font-size:.875rem;color:var(--gs-tx2)}
.gs-share-btns{display:flex;align-items:center;gap:.375rem;margin-left:auto}
.gs-share-btn{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:var(--gs-rmd);background:var(--gs-sf2);border:1px solid var(--gs-bd1);color:var(--gs-tx2);text-decoration:none;font-size:.9375rem;transition:background .15s,color .15s,border-color .15s}
.gs-share-btn:hover{background:var(--gs-cp-s);border-color:var(--gs-cp-b);color:var(--gs-cp-t);text-decoration:none}
.gs-share-btn:focus-visible{outline:none;box-shadow:var(--gs-foc)}
.gs-art-thumb{margin-top:2rem;border-radius:var(--gs-r2xl) var(--gs-r2xl) 0 0;height:340px;display:flex;align-items:center;justify-content:center;font-size:5rem;overflow:hidden;position:relative;background:linear-gradient(135deg,#EDE9FE 0%,#C4B5FD 60%,#A78BFA 100%)}
[data-theme="dark"] .gs-art-thumb{background:linear-gradient(135deg,rgba(109,40,217,.4) 0%,rgba(124,58,237,.5) 60%,rgba(167,139,250,.3) 100%)}
.gs-art-thumb::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(91,33,182,.08) 100%)}
/* Prose (article body) — child rules */
.gs-prose{font-size:1.0625rem;line-height:1.8;color:var(--gs-tx1);max-width:720px}
.gs-prose p{margin-bottom:1.25rem}
.gs-prose p:last-child{margin-bottom:0}
.gs-prose strong{color:var(--gs-tx0);font-weight:600}
.gs-prose em{font-style:italic}
.gs-prose a{color:var(--gs-cp);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.gs-prose a:hover{color:var(--gs-cp-h)}
.gs-prose h2{font-size:1.625rem;font-weight:800;letter-spacing:-.03em;color:var(--gs-tx0);margin:2.5rem 0 1rem;padding-bottom:.75rem;border-bottom:2px solid var(--gs-bd0);scroll-margin-top:calc(var(--gs-nh) + 1rem)}
.gs-prose h3{font-size:1.25rem;font-weight:700;letter-spacing:-.02em;color:var(--gs-tx0);margin:2rem 0 .875rem;scroll-margin-top:calc(var(--gs-nh) + 1rem)}
.gs-prose h4{font-size:1.0625rem;font-weight:700;color:var(--gs-tx0);margin:1.5rem 0 .625rem}
.gs-prose ul,.gs-prose ol{padding-left:1.75rem;margin-bottom:1.25rem}
.gs-prose li{margin-bottom:.5rem;line-height:1.7}
.gs-prose blockquote{border-left:4px solid var(--gs-cp);padding:.875rem 1.25rem;background:var(--gs-cp-s);border-radius:0 var(--gs-rmd) var(--gs-rmd) 0;margin:1.5rem 0;font-style:italic;color:var(--gs-tx0);font-size:1.0625rem}
[data-theme="dark"] .gs-prose blockquote{background:var(--gs-cp-m)}
.gs-prose code{font-family:monospace;font-size:.9em;background:var(--gs-bg2);color:var(--gs-cp-t);padding:.15em .4em;border-radius:var(--gs-rsm)}
.gs-prose hr{border:none;border-top:1px solid var(--gs-bd0);margin:2.5rem 0}
.gs-prose img{border-radius:var(--gs-rxl);margin:1.5rem 0}
.gs-prose table{width:100%;border-collapse:collapse;margin:1.75rem 0;font-size:.875rem}
.gs-prose th,.gs-prose td{padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--gs-bd0)}
.gs-prose thead th{background:var(--gs-bg1);font-family:var(--gs-fd);font-weight:700}
/* Table of contents (inline) */
.gs-toc{background:var(--gs-sf2);border:1px solid var(--gs-bd1);border-radius:var(--gs-rxl);padding:1.25rem 1.5rem;margin-bottom:2rem}
.gs-toc-title{font-family:var(--gs-fd);font-size:.875rem;font-weight:700;color:var(--gs-tx0);margin-bottom:.875rem;display:flex;align-items:center;gap:.5rem}
.gs-toc-title i{color:var(--gs-cp);font-size:.875rem}
.gs-toc-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.375rem;counter-reset:toc-item}
.gs-toc-item a{font-size:.875rem;color:var(--gs-tx1);text-decoration:none;display:flex;align-items:center;gap:.5rem;padding:.25rem 0;border-bottom:1px solid transparent;transition:color .15s}
.gs-toc-item a:hover{color:var(--gs-cp-t)}
.gs-toc-item a::before{content:counter(toc-item);counter-increment:toc-item;font-family:var(--gs-fd);font-size:.6875rem;font-weight:700;width:20px;height:20px;border-radius:50%;background:var(--gs-cp-m);color:var(--gs-cp-t);display:flex;align-items:center;justify-content:center;flex-shrink:0}
[data-theme="dark"] .gs-toc-item a::before{background:rgba(167,139,250,.22);color:#C4B5FD}
/* Comparison table */
.gs-art-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.75rem 0;border-radius:var(--gs-rxl);border:1px solid var(--gs-bd1)}
.gs-art-table{width:100%;border-collapse:collapse;min-width:480px;font-size:.875rem}
.gs-art-table th,.gs-art-table td{padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--gs-bd0)}
.gs-art-table thead th{background:var(--gs-bg1);font-family:var(--gs-fd);font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--gs-tx2)}
.gs-art-table tbody tr:last-child td{border-bottom:none}
.gs-art-table tbody tr:hover{background:var(--gs-bg1)}
/* Sticky TOC sidebar */
.gs-article-toc-sticky{position:sticky;top:calc(var(--gs-nh) + 1.5rem);background:var(--gs-sf1);border:1px solid var(--gs-bd1);border-radius:var(--gs-rxl);padding:1.25rem;max-height:calc(100vh - var(--gs-nh) - 3rem);overflow-y:auto;scrollbar-width:thin}
.gs-toc-sticky-title{font-family:var(--gs-fd);font-size:.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--gs-tx2);margin-bottom:.875rem}
.gs-toc-sticky-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.125rem}
.gs-toc-sticky-item a{display:block;font-size:.875rem;color:var(--gs-tx2);text-decoration:none;padding:.375rem .5rem;border-left:2px solid transparent;border-radius:0 var(--gs-rsm) var(--gs-rsm) 0;line-height:1.4;transition:color .15s,border-color .15s,background .15s}
.gs-toc-sticky-item a:hover{color:var(--gs-cp-t);border-left-color:var(--gs-cp-b);background:var(--gs-cp-s)}
.gs-toc-sticky-item.active a{color:var(--gs-cp-t);border-left-color:var(--gs-cp);font-weight:600;background:var(--gs-cp-s)}
[data-theme="dark"] .gs-toc-sticky-item.active a{background:var(--gs-cp-m)}
.gs-toc-sticky-item.h3 a{padding-left:1.25rem;font-size:.8125rem}
/* Article tags */
.gs-art-tags{display:flex;flex-wrap:wrap;gap:.375rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--gs-bd0)}
.gs-art-tag{display:inline-flex;align-items:center;padding:.3rem .75rem;border-radius:var(--gs-rf);font-size:.75rem;font-weight:500;color:var(--gs-tx2);background:var(--gs-sf2);border:1px solid var(--gs-bd1);text-decoration:none;transition:background .15s,border-color .15s,color .15s}
.gs-art-tag:hover{background:var(--gs-cp-s);border-color:var(--gs-cp-b);color:var(--gs-cp-t);text-decoration:none}
/* Author bio */
.gs-author-bio{display:flex;gap:1.25rem;align-items:flex-start;background:var(--gs-sf1);border:1px solid var(--gs-bd1);border-radius:var(--gs-r2xl);padding:1.75rem;margin-top:2.5rem}
.gs-bio-avatar{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--gs-fd);font-size:1.25rem;font-weight:700;color:#fff;flex-shrink:0}
.gs-bio-name{font-family:var(--gs-fd);font-size:1.0625rem;font-weight:800;color:var(--gs-tx0);margin-bottom:.25rem}
.gs-bio-role{font-size:.8125rem;color:var(--gs-cp-t);font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.625rem}
.gs-bio-text{font-size:.9375rem;color:var(--gs-tx1);line-height:1.65;margin-bottom:.875rem}
.gs-bio-socials{display:flex;gap:.375rem}
.gs-bio-soc{width:32px;height:32px;border-radius:var(--gs-rmd);display:flex;align-items:center;justify-content:center;background:var(--gs-bg2);border:1px solid var(--gs-bd1);color:var(--gs-tx2);font-size:.875rem;text-decoration:none;transition:background .15s,color .15s}
.gs-bio-soc:hover{background:var(--gs-cp-s);color:var(--gs-cp-t);text-decoration:none}
/* Editorial disclosure */
.gs-editorial-note{display:flex;align-items:flex-start;gap:.75rem;background:var(--gs-bg1);border:1px solid var(--gs-bd0);border-left:3px solid var(--gs-cp);border-radius:0 var(--gs-rmd) var(--gs-rmd) 0;padding:.875rem 1rem;margin-bottom:2rem}
.gs-editorial-note i{color:var(--gs-cp);font-size:1rem;flex-shrink:0;margin-top:2px}
.gs-editorial-note p{font-size:.8125rem;color:var(--gs-tx2);line-height:1.55}
.gs-editorial-note a{color:var(--gs-cp);text-decoration:underline}
/* Newsletter form card (blog variant) */
.gs-nl-form-card{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:var(--gs-r2xl);padding:1.75rem}

/* ════════════════════════════════════════════════════════════
   CATEGORIES INDEX (cat-*) + CATEGORY DETAIL extras — extracted verbatim
   from html_themes/categories.html + category.html inline <style> (were inline-only).
════════════════════════════════════════════════════════════ */
/* Categories hero */
.cat-hero{position:relative;overflow:hidden;background:linear-gradient(155deg,var(--gs-purple-50) 0%,var(--gs-bg0) 55%,var(--gs-green-50) 100%);border-bottom:1px solid var(--gs-bd0);padding:3.5rem 0 3rem}
[data-theme="dark"] .cat-hero{background:linear-gradient(155deg,#1a0b3d 0%,#0C0E14 50%,#071407 100%)}
.cat-hero-blob{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none}
.cat-hero-blob-1{width:520px;height:520px;top:-200px;right:-80px;background:var(--gs-purple-300);opacity:.07}
.cat-hero-blob-2{width:360px;height:360px;bottom:-140px;left:-60px;background:var(--gs-green-400);opacity:.06}
[data-theme="dark"] .cat-hero-blob{opacity:.15}
.cat-hero-eyebrow{display:inline-flex;align-items:center;gap:.375rem;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--gs-cp-t);background:var(--gs-cp-s);border:1px solid var(--gs-cp-b);border-radius:var(--gs-rf);padding:.25rem .875rem;margin-bottom:1.25rem}
[data-theme="dark"] .cat-hero-eyebrow{background:rgba(91,33,182,.16);border-color:rgba(167,139,250,.32)}
.cat-hero-h1{font-family:var(--gs-fd);font-size:clamp(2rem,4vw,2.875rem);font-weight:800;letter-spacing:-.04em;line-height:1.1;color:var(--gs-tx0);margin-bottom:.875rem}
.cat-hero-h1 .acc{color:var(--gs-cp)}
.cat-hero-lead{font-size:1.0625rem;color:var(--gs-tx1);line-height:1.65;max-width:540px;margin-bottom:2rem}
.cat-hero-stats{display:flex;flex-wrap:wrap;gap:1.75rem;padding-top:1.75rem;border-top:1px solid var(--gs-bd0)}
.cat-hero-stat-num{font-family:var(--gs-fd);font-size:1.625rem;font-weight:800;letter-spacing:-.035em;line-height:1;color:var(--gs-tx0)}
.cat-hero-stat-num em{color:var(--gs-cp);font-style:normal}
.cat-hero-stat-lbl{font-size:.75rem;color:var(--gs-tx2);margin-top:.25rem;font-weight:500}
/* Breadcrumb bar */
.cat-bc-bar{border-bottom:1px solid var(--gs-bd0);background:var(--gs-bg1);padding:.625rem 0}
/* Section layout */
.cat-section{padding:3.5rem 0}
.cat-section-alt{background:var(--gs-bg1)}
.cat-section-h2{font-family:var(--gs-fd);font-size:clamp(1.375rem,2.5vw,1.75rem);font-weight:800;letter-spacing:-.03em;color:var(--gs-tx0);margin-bottom:.5rem}
.cat-section-sub{font-size:.9375rem;color:var(--gs-tx2);line-height:1.6}
/* Category cards */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:1.25rem}
.cat-card{background:var(--gs-sf0);border:1px solid var(--gs-bd0);border-radius:var(--gs-rxl);padding:1.75rem;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:box-shadow .2s,border-color .2s,transform .2s;position:relative;overflow:hidden}
.cat-card:hover{box-shadow:var(--gs-shlg);border-color:var(--gs-cp-b);transform:translateY(-3px);text-decoration:none;color:inherit}
.cat-card:focus-visible{outline:none;box-shadow:var(--gs-foc)}
.cat-card-bg{position:absolute;inset:0;opacity:0;transition:opacity .25s}
.cat-card:hover .cat-card-bg{opacity:1}
.cat-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;margin-bottom:1rem}
.cat-card-icon{width:52px;height:52px;border-radius:var(--gs-rlg);display:flex;align-items:center;justify-content:center;font-size:1.375rem;flex-shrink:0;position:relative;z-index:1}
.cat-card-count{font-size:.75rem;font-weight:700;color:var(--gs-tx2);background:var(--gs-bg2);border-radius:var(--gs-rf);padding:.25rem .625rem;position:relative;z-index:1;white-space:nowrap}
.cat-card-name{font-family:var(--gs-fd);font-size:1.125rem;font-weight:800;letter-spacing:-.025em;color:var(--gs-tx0);margin-bottom:.5rem;position:relative;z-index:1}
.cat-card-desc{font-size:.875rem;color:var(--gs-tx2);line-height:1.6;flex-grow:1;margin-bottom:1.125rem;position:relative;z-index:1}
.cat-card-subs{display:flex;flex-wrap:wrap;gap:.375rem;margin-bottom:1.125rem;position:relative;z-index:1}
.cat-card-sub{font-size:.6875rem;font-weight:600;color:var(--gs-tx2);background:var(--gs-bg2);border-radius:var(--gs-rf);padding:.1875rem .5rem;transition:background .12s,color .12s}
.cat-card:hover .cat-card-sub{background:var(--gs-sf0);color:var(--gs-tx1)}
.cat-card-cta{display:inline-flex;align-items:center;gap:.375rem;font-family:var(--gs-fd);font-size:.875rem;font-weight:700;color:var(--gs-cp);position:relative;z-index:1;transition:gap .15s}
.cat-card:hover .cat-card-cta{gap:.625rem}
/* Platform stats strip */
.cat-stats-strip{background:#0a0d18;padding:3rem 0;position:relative;overflow:hidden}
.cat-stats-strip::before{content:'';position:absolute;top:-100px;left:-80px;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(91,33,182,.2) 0%,transparent 70%);pointer-events:none}
.cat-stats-strip::after{content:'';position:absolute;bottom:-80px;right:-60px;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(61,139,55,.14) 0%,transparent 70%);pointer-events:none}
.cat-stat-item{text-align:center;padding:1.25rem 1rem}
.cat-stat-num{display:block;font-family:var(--gs-fd);font-size:clamp(2rem,4vw,3rem);font-weight:800;letter-spacing:-.04em;line-height:1;margin-bottom:.5rem}
.cat-stat-lbl{font-size:.875rem;color:rgba(255,255,255,.5);font-weight:500}
/* CTA section */
.cat-cta-section{background:linear-gradient(135deg,#5B21B6 0%,#3B21B6 100%);padding:4rem 0;position:relative;overflow:hidden}
.cat-cta-section::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 72% 50%,rgba(255,255,255,.08),transparent 55%);pointer-events:none}
.cat-cta-blob{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none}
.cat-cta-blob-1{width:400px;height:400px;top:-150px;right:-60px;background:rgba(255,255,255,.06)}
.cat-cta-blob-2{width:280px;height:280px;bottom:-100px;left:-40px;background:rgba(255,255,255,.04)}
.cat-cta-h2{font-family:var(--gs-fd);font-size:clamp(1.75rem,3vw,2.375rem);font-weight:800;letter-spacing:-.035em;line-height:1.15;color:#fff;margin-bottom:.875rem}
.cat-cta-sub{font-size:1rem;color:rgba(255,255,255,.75);line-height:1.65;max-width:480px;margin-bottom:2rem}
/* ── CATEGORY DETAIL extras (gs-cat-*) ── */
.gs-cat-blob{position:absolute;border-radius:50%;filter:blur(72px);opacity:.07}
[data-theme="dark"] .gs-cat-blob{opacity:.15}
.gs-cat-hero-blobs{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.gs-cat-blob-1{width:480px;height:480px;background:#5B21B6;top:-180px;right:-60px}
.gs-cat-blob-2{width:320px;height:320px;background:#3D8B37;bottom:-120px;left:-40px}
.gs-cat-eyebrow{display:inline-flex;align-items:center;gap:.4rem;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--gs-cp-t);background:var(--gs-cp-s);border:1px solid var(--gs-cp-b);border-radius:var(--gs-rf);padding:.3rem .875rem;margin-bottom:1rem}
[data-theme="dark"] .gs-cat-eyebrow{background:rgba(91,33,182,.16);border-color:rgba(167,139,250,.32)}
.gs-cat-stats{display:flex;flex-wrap:wrap;gap:1.5rem;font-size:.875rem;color:var(--gs-tx2)}
.gs-cat-stat{display:flex;align-items:center;gap:.375rem}
.gs-cat-stat strong{color:var(--gs-tx0);font-weight:700}
.gs-cat-stat i{font-size:.875rem;color:var(--gs-cp)}
.gs-cat-search-wrap{margin-top:1.75rem}
.gs-cat-search-form{display:flex;gap:.5rem;max-width:560px}
.gs-cat-search-icon-wrap{position:relative;flex:1}
.gs-cat-search-icon{position:absolute;left:.875rem;top:50%;transform:translateY(-50%);color:var(--gs-tx2);font-size:1rem;pointer-events:none}
.gs-cat-search-input{flex:1;width:100%;height:48px;padding:0 1.125rem 0 2.75rem;border:1.5px solid var(--gs-bd1);border-radius:var(--gs-rf);background:var(--gs-sf0);font-family:var(--gs-fb);font-size:.9375rem;color:var(--gs-tx0);outline:none;transition:border-color .18s,box-shadow .18s}
.gs-cat-search-input::placeholder{color:var(--gs-tx2)}
.gs-cat-search-input:focus{border-color:var(--gs-cp);box-shadow:var(--gs-foc)}
/* Filter / sort toolbar */
.gs-filter-bar{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;padding:1.25rem 0;border-bottom:1px solid var(--gs-bd0)}
.gs-filter-label{font-size:.8125rem;font-weight:600;color:var(--gs-tx2);flex-shrink:0}
.gs-filter-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;flex:1}
.gs-sort-wrap{display:flex;align-items:center;gap:.5rem;margin-left:auto;flex-shrink:0}
.gs-sort-label{font-size:.8125rem;color:var(--gs-tx2);flex-shrink:0;white-space:nowrap}
.gs-sort-select{width:auto;min-width:160px;height:36px;padding:0 2rem 0 .75rem;font-size:.8125rem;border-color:var(--gs-bd1)}
.gs-results-count{font-size:.8125rem;color:var(--gs-tx2);flex-shrink:0}
.gs-results-count strong{color:var(--gs-tx0)}
/* List-view variant for the auto grid (view toggle) */
.gs-grid-auto.is-list{grid-template-columns:1fr}
@media(max-width:767.98px){.gs-filter-bar{gap:.5rem}.gs-sort-wrap{margin-left:0;width:100%;justify-content:space-between}.cat-cta-section{padding:3rem 0}}
@media(max-width:575.98px){.cat-grid{grid-template-columns:1fr}}

/* ════════════════════════════════════════════════════════════
   COMPARE PAGE (cmp-*) — extracted verbatim from html_themes/compare.html
   inline <style> (was inline-only; absent from external CSS).
════════════════════════════════════════════════════════════ */
.cmp-hero{position:relative;overflow:hidden;background:linear-gradient(155deg,var(--gs-purple-50) 0%,var(--gs-bg0) 55%,var(--gs-blue-50) 100%);border-bottom:1px solid var(--gs-bd0);padding:3.5rem 0 3rem}
[data-theme="dark"] .cmp-hero{background:linear-gradient(155deg,#1a0b3d 0%,#0C0E14 50%,#071126 100%)}
.cmp-hero-blob{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none}
.cmp-hero-blob-1{width:520px;height:520px;top:-180px;right:-80px;background:var(--gs-purple-300);opacity:.07}
.cmp-hero-blob-2{width:380px;height:380px;bottom:-130px;left:-60px;background:var(--gs-blue-300);opacity:.06}
[data-theme="dark"] .cmp-hero-blob{opacity:.14}
.cmp-hero-eyebrow{display:inline-flex;align-items:center;gap:.375rem;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--gs-cp-t);background:var(--gs-cp-s);border:1px solid var(--gs-cp-b);border-radius:var(--gs-rf);padding:.25rem .875rem;margin-bottom:1.25rem}
[data-theme="dark"] .cmp-hero-eyebrow{background:rgba(91,33,182,.16);border-color:rgba(167,139,250,.32)}
.cmp-hero-h1{font-family:var(--gs-fd);font-size:clamp(1.6rem,2.8vw,2.2rem);white-space:nowrap;font-weight:800;letter-spacing:-.04em;line-height:1.1;color:var(--gs-tx0);margin-bottom:.875rem}
.cmp-hero-h1 .acc{color:var(--gs-cp)}
.cmp-hero-lead{font-size:1.0625rem;color:var(--gs-tx1);line-height:1.65;margin-bottom:2rem}
.cmp-builder{background:var(--gs-sf0);border:1px solid var(--gs-bd1);border-radius:var(--gs-r2xl);padding:1.75rem 2rem;box-shadow:var(--gs-shmd)}
.cmp-builder-label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--gs-tx2);margin-bottom:.625rem;display:block}
.cmp-tool-input-wrap{position:relative}
.cmp-tool-input-ico{position:absolute;left:.875rem;top:50%;transform:translateY(-50%);color:var(--gs-tx2);font-size:.9375rem;pointer-events:none;z-index:1}
.cmp-tool-input{width:100%;height:50px;padding:0 1rem 0 2.625rem;border:1.5px solid var(--gs-bd1);border-radius:var(--gs-rmd);background:var(--gs-bg1);font-family:var(--gs-fb);font-size:.9375rem;color:var(--gs-tx0);outline:none;transition:border-color .15s,box-shadow .15s}
.cmp-tool-input:focus{border-color:var(--gs-cp);box-shadow:var(--gs-foc);background:var(--gs-sf0)}
.cmp-tool-input::placeholder{color:var(--gs-tx2)}
.cmp-vs-badge{width:36px;height:36px;border-radius:50%;background:var(--gs-bg2);border:2px solid var(--gs-bd1);display:flex;align-items:center;justify-content:center;font-family:var(--gs-fd);font-size:.6875rem;font-weight:800;color:var(--gs-tx2);flex-shrink:0;letter-spacing:.04em}
.cmp-add-tool-btn{background:none;border:1.5px dashed var(--gs-bd1);border-radius:var(--gs-rmd);height:50px;padding:0 1.25rem;font-family:var(--gs-fb);font-size:.875rem;color:var(--gs-tx2);cursor:pointer;width:100%;transition:border-color .15s,color .15s,background .15s;display:flex;align-items:center;justify-content:center;gap:.375rem}
.cmp-add-tool-btn:hover{border-color:var(--gs-cp);color:var(--gs-cp);background:var(--gs-cp-s)}
.cmp-add-tool-btn:focus-visible{outline:none;box-shadow:var(--gs-foc)}
.cmp-section{padding:3.5rem 0}
.cmp-section-alt{background:var(--gs-bg1)}
.cmp-section-h2{font-family:var(--gs-fd);font-size:clamp(1.375rem,2.5vw,1.75rem);font-weight:800;letter-spacing:-.03em;color:var(--gs-tx0);margin-bottom:.5rem}
.cmp-section-sub{font-size:.9375rem;color:var(--gs-tx2);line-height:1.6}
.cmp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:1rem}
.cmp-card{display:flex;flex-direction:column;background:var(--gs-sf0);border:1px solid var(--gs-bd0);border-radius:var(--gs-rxl);padding:1.25rem;text-decoration:none;color:inherit;transition:box-shadow .2s,border-color .2s,transform .2s}
.cmp-card:hover{box-shadow:var(--gs-shlg);border-color:var(--gs-cp-b);transform:translateY(-2px);text-decoration:none;color:inherit}
.cmp-card:focus-visible{outline:none;box-shadow:var(--gs-foc)}
.cmp-card-logos{display:flex;align-items:center;gap:.625rem;margin-bottom:1rem}
.cmp-card-logo{width:44px;height:44px;border-radius:var(--gs-rmd);display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex-shrink:0;border:1px solid var(--gs-bd0);background:var(--gs-bg1)}
.cmp-card-vs{font-size:.6875rem;font-weight:800;color:var(--gs-tx2);letter-spacing:.06em;flex-shrink:0}
.cmp-card-title{font-family:var(--gs-fd);font-size:.9375rem;font-weight:700;color:var(--gs-tx0);margin-bottom:.375rem;line-height:1.3}
.cmp-card-meta{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.875rem}
.cmp-card-cat{font-size:.6875rem;font-weight:600;color:var(--gs-cp-t);background:var(--gs-cp-s);border-radius:var(--gs-rf);padding:.125rem .5rem}
.cmp-card-views{font-size:.6875rem;color:var(--gs-tx2)}
.cmp-card-cta{margin-top:auto;display:flex;align-items:center;gap:.375rem;font-family:var(--gs-fd);font-size:.8125rem;font-weight:700;color:var(--gs-cp);transition:gap .15s}
.cmp-card:hover .cmp-card-cta{gap:.625rem}
.cmp-cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));gap:.75rem}
.cmp-cat-link{display:flex;align-items:center;gap:.75rem;padding:.875rem 1rem;background:var(--gs-sf0);border:1px solid var(--gs-bd0);border-radius:var(--gs-rlg);text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s,background .15s}
.cmp-cat-link:hover{border-color:var(--gs-cp-b);box-shadow:var(--gs-shsm);background:var(--gs-cp-s);text-decoration:none;color:inherit}
.cmp-cat-link:focus-visible{outline:none;box-shadow:var(--gs-foc)}
.cmp-cat-ico{width:36px;height:36px;border-radius:var(--gs-rmd);display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}
.cmp-cat-name{font-family:var(--gs-fd);font-size:.875rem;font-weight:700;color:var(--gs-tx0);line-height:1.25}
.cmp-cat-count{font-size:.75rem;color:var(--gs-tx2)}
.cmp-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--gs-bd0);border-radius:var(--gs-rxl)}
.cmp-table{width:100%;border-collapse:collapse;min-width:480px;font-size:.875rem}
.cmp-table th{padding:.875rem 1rem;text-align:left;background:var(--gs-bg1);font-family:var(--gs-fd);font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--gs-tx2);border-bottom:1px solid var(--gs-bd0)}
.cmp-table th.cmp-col-hl{background:var(--gs-cp-s);color:var(--gs-cp-t);border-bottom-color:var(--gs-cp-b)}
.cmp-table td{padding:.75rem 1rem;border-bottom:1px solid var(--gs-bd0);color:var(--gs-tx1);vertical-align:middle}
.cmp-table td.cmp-col-hl{background:rgba(91,33,182,.03)}
[data-theme="dark"] .cmp-table td.cmp-col-hl{background:rgba(109,40,217,.08)}
.cmp-table tbody tr:last-child td{border-bottom:none}
.cmp-table tbody tr:hover td{background:var(--gs-bg1)}
.cmp-table tbody tr:hover td.cmp-col-hl{background:var(--gs-cp-s)}
.cmp-table .cmp-feat-name{font-weight:600;color:var(--gs-tx0);font-size:.875rem}
.cmp-table .cmp-feat-cat{font-size:.6875rem;color:var(--gs-tx2);display:block}
.cmp-table td.cmp-center{text-align:center}
.cmp-check-yes{color:var(--gs-cs);font-size:1.0625rem}
.cmp-check-no{color:var(--gs-neutral-300);font-size:1.0625rem}
[data-theme="dark"] .cmp-check-no{color:var(--gs-neutral-600)}
.cmp-check-part{font-size:.75rem;font-weight:600;color:var(--gs-orange-500);background:rgba(249,115,22,.1);padding:.125rem .5rem;border-radius:var(--gs-rf)}
.cmp-step{display:flex;gap:1.25rem;align-items:flex-start}
.cmp-step-num{width:40px;height:40px;border-radius:50%;background:var(--gs-cp);color:var(--gs-cp-fg,#fff);font-family:var(--gs-fd);font-size:.9375rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 12px rgba(91,33,182,.28)}
.cmp-step-title{font-family:var(--gs-fd);font-size:1rem;font-weight:700;color:var(--gs-tx0);margin-bottom:.375rem}
.cmp-step-desc{font-size:.875rem;color:var(--gs-tx2);line-height:1.6}
.cmp-cta{background:linear-gradient(135deg,#5B21B6 0%,#3B21B6 100%);padding:4rem 0;position:relative;overflow:hidden}
.cmp-cta::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 72% 50%,rgba(255,255,255,.08),transparent 55%);pointer-events:none}
.cmp-cta-blob{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none}
.cmp-cta-blob-1{width:400px;height:400px;top:-150px;right:-60px;background:rgba(255,255,255,.06)}
.cmp-cta-blob-2{width:280px;height:280px;bottom:-100px;left:-40px;background:rgba(255,255,255,.04)}
.cmp-cta-h2{font-family:var(--gs-fd);font-size:clamp(1.75rem,3vw,2.375rem);font-weight:800;letter-spacing:-.035em;line-height:1.15;color:#fff;margin-bottom:.875rem}
.cmp-cta-sub{font-size:1rem;color:rgba(255,255,255,.75);line-height:1.65;max-width:480px;margin-bottom:2rem}
@media(max-width:767.98px){.cmp-builder{padding:1.25rem 1.25rem}.cmp-hero{padding:2.5rem 0 2rem}.cmp-section{padding:2.5rem 0}.cmp-cta{padding:3rem 0}}
@media(max-width:575.98px){.cmp-hero{padding:2rem 0 1.75rem}.cmp-grid{grid-template-columns:1fr}.cmp-cat-grid{grid-template-columns:1fr 1fr}}

/* ════════════════════════════════════════════════════════════
   CONTACT PAGE — extracted verbatim from html_themes/contact.html
   inline <style> (was inline-only; absent from external CSS).
════════════════════════════════════════════════════════════ */
.gs-contact-hero{position:relative;overflow:hidden;background:linear-gradient(155deg,#F5F3FF 0%,#FFFFFF 50%,#F0FDF4 100%);padding:4rem 0 3.5rem}
[data-theme="dark"] .gs-contact-hero{background:linear-gradient(155deg,#1a0b3d 0%,#0C0E14 50%,#071407 100%)}
.gs-ch-blobs{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.gs-ch-blob{position:absolute;border-radius:50%;filter:blur(72px);opacity:.06}
[data-theme="dark"] .gs-ch-blob{opacity:.14}
.gs-ch-blob-1{width:520px;height:520px;background:#5B21B6;top:-200px;right:-80px}
.gs-ch-blob-2{width:340px;height:340px;background:#3D8B37;bottom:-120px;left:-60px}
.gs-ch-eyebrow{display:inline-flex;align-items:center;gap:.4rem;font-size:.8125rem;font-weight:600;color:var(--gs-cp-t);background:var(--gs-cp-s);border:1px solid var(--gs-cp-b);border-radius:var(--gs-rf);padding:.375rem 1rem;margin-bottom:1.5rem}
[data-theme="dark"] .gs-ch-eyebrow{background:rgba(91,33,182,.16);border-color:rgba(167,139,250,.32)}
.gs-ch-h1{font-size:clamp(2rem,4.5vw,3.25rem);font-weight:800;letter-spacing:-.04em;line-height:1.1;color:var(--gs-tx0);margin-bottom:1.125rem}
.gs-ch-h1 .acc{color:var(--gs-cp)}
.gs-ch-sub{font-size:1.0625rem;color:var(--gs-tx1);line-height:1.7;max-width:560px;margin-bottom:0}
/* Routing cards */
.gs-route-card{display:flex;flex-direction:column;gap:1rem;background:var(--gs-sf1);border:1.5px solid var(--gs-bd1);border-radius:var(--gs-r2xl);padding:1.75rem;text-decoration:none;transition:box-shadow .2s,border-color .2s,transform .2s;cursor:pointer;height:100%}
.gs-route-card:hover{box-shadow:var(--gs-shlg);border-color:var(--gs-cp-b);transform:translateY(-3px);text-decoration:none}
.gs-route-card.selected{border-color:var(--gs-cp);box-shadow:0 0 0 3px var(--gs-cp-m)}
.gs-route-card:focus-visible{outline:none;box-shadow:var(--gs-foc);border-color:var(--gs-cp)}
.gs-route-icon{width:52px;height:52px;border-radius:var(--gs-rlg);display:flex;align-items:center;justify-content:center;font-size:1.375rem;flex-shrink:0}
.gs-route-tag{display:inline-flex;align-items:center;gap:.3rem;font-size:.5625rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:2px 7px;border-radius:var(--gs-rf);background:var(--gs-cp-m);color:var(--gs-cp-t);margin-bottom:.25rem;align-self:flex-start}
[data-theme="dark"] .gs-route-tag{background:rgba(167,139,250,.22);color:#C4B5FD}
.gs-route-title{font-family:var(--gs-fd);font-size:1.0625rem;font-weight:700;color:var(--gs-tx0);margin-bottom:.25rem}
.gs-route-desc{font-size:.875rem;color:var(--gs-tx1);line-height:1.55}
.gs-route-link{display:flex;align-items:center;gap:.375rem;font-size:.8125rem;font-weight:600;color:var(--gs-cp-t);margin-top:auto;padding-top:.25rem;transition:gap .15s}
.gs-route-card:hover .gs-route-link{gap:.625rem}
.gs-route-link i{font-size:.75rem;transition:transform .15s}
.gs-route-card:hover .gs-route-link i{transform:translateX(3px)}
/* Form card + fields */
.gs-form-card{background:var(--gs-sf1);border:1px solid var(--gs-bd1);border-radius:var(--gs-r2xl);padding:2.5rem;box-shadow:var(--gs-shxl)}
@media(max-width:575.98px){.gs-form-card{padding:1.5rem}}
.gs-field-group{margin-bottom:1.25rem}
.gs-field-group:last-child{margin-bottom:0}
.gs-field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:575.98px){.gs-field-row{grid-template-columns:1fr}}
.gs-field-footer{display:flex;align-items:center;justify-content:space-between}
.gs-input.error,.gs-textarea.error,.gs-select.error{border-color:#DC2626;box-shadow:0 0 0 3px rgba(220,38,38,.2)}
.gs-field-err{font-size:.75rem;color:#DC2626;margin-top:.375rem;display:flex;align-items:center;gap:.25rem}
.gs-field-err i{font-size:.75rem;flex-shrink:0}
.gs-field-hint{font-size:.75rem;color:var(--gs-tx2);margin-top:.375rem}
.gs-char-count{font-size:.6875rem;color:var(--gs-tx2);text-align:right;margin-top:.25rem}
.gs-char-count.warn{color:var(--gs-orange-500)}
/* Form success state */
.gs-form-success{display:none;flex-direction:column;align-items:center;text-align:center;padding:2.5rem 1.5rem}
.gs-form-success.visible{display:flex}
.gs-success-icon{width:64px;height:64px;border-radius:50%;background:var(--gs-green-100);border:2px solid var(--gs-green-200);display:flex;align-items:center;justify-content:center;font-size:1.75rem;margin-bottom:1.25rem}
[data-theme="dark"] .gs-success-icon{background:rgba(61,139,55,.2);border-color:rgba(74,222,128,.3)}
.gs-success-title{font-family:var(--gs-fd);font-size:1.25rem;font-weight:700;color:var(--gs-tx0);margin-bottom:.5rem}
.gs-success-sub{font-size:.9375rem;color:var(--gs-tx1);line-height:1.6}
/* Info sidebar cards */
.gs-info-card{background:var(--gs-sf1);border:1px solid var(--gs-bd1);border-radius:var(--gs-rxl);padding:1.375rem 1.5rem;display:flex;align-items:flex-start;gap:1rem;transition:box-shadow .2s,border-color .2s}
.gs-info-card:hover{box-shadow:var(--gs-shmd);border-color:var(--gs-cp-b)}
.gs-info-icon{width:40px;height:40px;border-radius:var(--gs-rmd);display:flex;align-items:center;justify-content:center;font-size:1.125rem;flex-shrink:0}
.gs-info-label{font-size:.625rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--gs-tx2);margin-bottom:.25rem}
.gs-info-val{font-family:var(--gs-fd);font-size:.9375rem;font-weight:600;color:var(--gs-tx0);margin-bottom:.2rem}
.gs-info-sub{font-size:.8125rem;color:var(--gs-tx2);line-height:1.5}
.gs-info-link{font-size:.8125rem;color:var(--gs-cp-t);text-decoration:none;transition:color .15s;margin-top:.25rem;display:inline-flex;align-items:center;gap:.25rem}
.gs-info-link:hover{color:var(--gs-cp-h)}
.gs-info-link i{font-size:.625rem}
/* Response badge */
.gs-resp-badge{display:inline-flex;align-items:center;gap:.375rem;font-size:.75rem;font-weight:600;padding:.375rem .875rem;border-radius:var(--gs-rf);background:var(--gs-green-100);color:var(--gs-green-700);border:1px solid var(--gs-green-200)}
[data-theme="dark"] .gs-resp-badge{background:rgba(61,139,55,.2);color:#4ADE80;border-color:rgba(74,222,128,.25)}
.gs-resp-dot{width:7px;height:7px;border-radius:50%;background:var(--gs-green-600);flex-shrink:0;animation:gs-pulse 2s ease-in-out infinite}
@keyframes gs-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.85)}}
/* Help links */
.gs-help-link{display:flex;align-items:center;gap:.875rem;padding:1.125rem 1.25rem;background:var(--gs-sf1);border:1px solid var(--gs-bd1);border-radius:var(--gs-rxl);text-decoration:none;transition:box-shadow .2s,border-color .2s,transform .15s}
.gs-help-link:hover{box-shadow:var(--gs-shmd);border-color:var(--gs-cp-b);transform:translateX(3px);text-decoration:none}
.gs-help-link:focus-visible{outline:none;box-shadow:var(--gs-foc)}
.gs-help-link-ico{width:36px;height:36px;border-radius:var(--gs-rmd);display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}
.gs-help-link-title{font-family:var(--gs-fd);font-size:.875rem;font-weight:600;color:var(--gs-tx0);margin-bottom:1px;transition:color .15s}
.gs-help-link:hover .gs-help-link-title{color:var(--gs-cp-t)}
.gs-help-link-sub{font-size:.75rem;color:var(--gs-tx2)}
.gs-help-link-arr{font-size:.75rem;color:var(--gs-tx2);margin-left:auto;transition:transform .15s,color .15s;flex-shrink:0}
.gs-help-link:hover .gs-help-link-arr{transform:translateX(3px);color:var(--gs-cp)}

/* ══════════════════════════════════════════════════════════════════
   PRICING PAGE — component CSS extracted from html_themes/pricing.html
   (inline-only there). Hero, billing toggle deps already exist; these
   were genuinely missing from the external stylesheets.
══════════════════════════════════════════════════════════════════ */
.gs-pricing-hero{
  position:relative;overflow:hidden;
  background:linear-gradient(155deg,#F5F3FF 0%,#FFFFFF 50%,#F0FDF4 100%);
  padding:4.5rem 0 3rem;
  text-align:center;
}
[data-theme="dark"] .gs-pricing-hero{
  background:linear-gradient(155deg,#1a0b3d 0%,#0C0E14 50%,#071407 100%);
}
.gs-ph-blobs{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.gs-ph-blob{position:absolute;border-radius:50%;filter:blur(72px);opacity:.06}
[data-theme="dark"] .gs-ph-blob{opacity:.14}
.gs-ph-blob-1{width:560px;height:560px;background:#5B21B6;top:-200px;right:-80px}
.gs-ph-blob-2{width:380px;height:380px;background:#3D8B37;bottom:-140px;left:-60px}
.gs-ph-eyebrow{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.8125rem;font-weight:600;color:var(--gs-cp-t,#5B21B6);
  background:var(--gs-cp-s,#F5F3FF);border:1px solid var(--gs-cp-b,#DDD6FE);
  border-radius:var(--gs-rf,9999px);padding:.375rem 1rem;margin-bottom:1.5rem;
}
[data-theme="dark"] .gs-ph-eyebrow{background:rgba(91,33,182,.16);border-color:rgba(167,139,250,.32)}
.gs-ph-h1{
  font-size:clamp(2rem,4.5vw,3.25rem);font-weight:800;
  letter-spacing:-.04em;line-height:1.1;
  color:var(--gs-tx0);margin-bottom:1.125rem;
}
.gs-ph-h1 .acc{color:var(--gs-cp,#5B21B6)}
.gs-ph-sub{
  font-size:1.0625rem;color:var(--gs-tx1);line-height:1.7;
  max-width:560px;margin:0 auto 2.5rem;
}
/* Compare table */
/* PROGRESSIVE DISCLOSURE for the plan comparison (tool pages). The essentials table renders open;
   every remaining group sits in this <details>. A native disclosure on purpose — keyboard, Escape
   and find-in-page all work, and a 35-row table is exactly the content that must not depend on a
   script having loaded. */
.gs-cmp-more{margin-top:1.25rem}
.gs-cmp-more>summary{display:flex;align-items:center;justify-content:center;gap:.5rem;
  list-style:none;cursor:pointer;margin:0 auto;width:max-content;max-width:100%;
  padding:.7rem 1.35rem;border:1px solid var(--gs-bd0,#e5e7eb);border-radius:999px;
  background:var(--gs-sf0,#fff);font-size:.875rem;font-weight:650;color:var(--gs-cp,#5b21b6);
  min-height:44px;transition:border-color .15s}
.gs-cmp-more>summary::-webkit-details-marker{display:none}
.gs-cmp-more>summary:hover{border-color:var(--gs-cp,#5b21b6)}
.gs-cmp-more>summary:focus-visible{outline:2px solid var(--gs-cp,#5b21b6);outline-offset:2px}
.gs-cmp-more[open]>summary{margin-bottom:1.25rem}
.gs-cmp-more[open]>summary .bi{transform:rotate(180deg)}
.gs-cmp-more>summary .bi{transition:transform .15s}
@media(prefers-reduced-motion:reduce){.gs-cmp-more>summary .bi{transition:none}}
.gs-compare-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.gs-compare-table{width:100%;border-collapse:collapse;min-width:620px;font-size:.875rem}
.gs-compare-table th,
.gs-compare-table td{padding:.875rem 1rem;text-align:left;border-bottom:1px solid var(--gs-bd0)}
.gs-compare-table thead tr{background:var(--gs-bg1)}
.gs-compare-table thead th{font-family:var(--gs-fd);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--gs-tx2)}
.gs-compare-table thead th:first-child{min-width:200px}
.gs-compare-table thead th:not(:first-child){text-align:center;min-width:130px}
.gs-compare-table tbody tr:hover{background:var(--gs-bg1)}
.gs-compare-table td:not(:first-child){text-align:center}
.gs-compare-table td:first-child{font-weight:500;color:var(--gs-tx0)}
.gs-compare-check{color:var(--gs-cs,#16A34A);font-size:1.0625rem}
.gs-compare-cross{color:var(--gs-neutral-300,#D1D5DB);font-size:1.0625rem}
[data-theme="dark"] .gs-compare-cross{color:#4B5563}
.gs-compare-val{color:var(--gs-tx1);font-weight:500}
.gs-ct-group-hd{background:var(--gs-bg1)}
.gs-ct-group-hd td{font-family:var(--gs-fd);font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--gs-tx2);padding:.625rem 1rem}

/* ── Compare table: sticky plan header (2026-07-27) ───────────────────────────
   The table is ~2900px tall, so the plan names scroll out of sight long before the
   feature rows do. The header now pins under the navbar while the table is in view and
   leaves with the table — position:sticky is constrained to its own table, so the
   "hide it once the section ends" behaviour is automatic, no JS needed for it.

   ⚠ .gs-compare-wrap has overflow-x:auto, and per spec overflow-y then computes to auto
   too — that makes it a SCROLL CONTAINER, and a sticky child sticks to *it* rather than
   to the viewport. So the overflow is dropped only at widths where the table already fits,
   and kept below that, where horizontal scrolling is genuinely needed. Do not "tidy" that
   overflow back in.

   ⚠ 992px, NOT 768px. This was 768 when the widest table was Feature + 3 plans (~704px in a
   ~712px container). The hosting page has Feature + 4: measured 759px in 712px at a 768px
   viewport, with overflow:visible — so the PAGE scrolled sideways 22px, outside any scroll
   box. At 992 the container is ~936px and five columns fit. Raise this again before adding
   a fifth plan column anywhere. */
@media (min-width:992px){
  .gs-compare-wrap{overflow:visible}
  .gs-compare-table thead th{
    position:sticky;
    /* --gs-cmp-top is measured from the real navbar by pricing-compare.js; the fallback is
       the navbar's actual 5rem, NOT --gs-nh (4rem) which does not match .gs-navbar. */
    top:var(--gs-cmp-top,5rem);
    z-index:4;                      /* above the rows, far below the navbar's 500 */
    background:var(--gs-bg1,#f8fafc);
    /* border-bottom does NOT travel with a sticky cell under border-collapse:collapse —
       the collapsed border belongs to the grid, so it stays behind. Paint it inset. */
    box-shadow:inset 0 -1px 0 var(--gs-bd0,#e5e7eb);
    transition:box-shadow .2s ease;
  }
  /* Lifted only while actually pinned, so the header reads as floating over the rows
     instead of carrying a permanent shadow at rest. */
  .gs-compare-wrap.is-stuck .gs-compare-table thead th{
    box-shadow:inset 0 -1px 0 var(--gs-bd0,#e5e7eb),0 12px 18px -14px rgba(15,23,42,.45);
  }
}
/* Below 992px the wrap IS the horizontal scroll container, so a vertical sticky header is
   not possible there. Pin the feature-name column instead — that is the label you lose
   when scrolling sideways, which is the mobile equivalent of the same problem. */
@media (max-width:767.98px){
  .gs-compare-table th:first-child,
  .gs-compare-table td:first-child{
    position:sticky;left:0;z-index:2;background:var(--gs-surface-0,#fff);
    box-shadow:1px 0 0 var(--gs-bd0,#e5e7eb);
  }
  .gs-compare-table thead th:first-child,
  .gs-ct-group-hd td:first-child{background:var(--gs-bg1,#f8fafc)}
}
/* Social-proof logo strip */
.gs-proof-strip{background:var(--gs-bg1);border-top:1px solid var(--gs-bd0);border-bottom:1px solid var(--gs-bd0);padding:2rem 0}
.gs-proof-label{font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--gs-tx2);text-align:center;margin-bottom:1.25rem}
.gs-proof-logos{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:2rem}
.gs-proof-logo{font-family:var(--gs-fd);font-size:.9375rem;font-weight:800;color:var(--gs-tx2);letter-spacing:-.02em;opacity:.4;filter:grayscale(1);transition:opacity .2s,filter .2s;user-select:none}
.gs-proof-logo:hover{opacity:.75;filter:none}
/* Vendor testimonials */
.gs-vtesti{background:var(--gs-sf1);border:1px solid var(--gs-bd1);border-radius:var(--gs-rxl);padding:1.75rem;display:flex;flex-direction:column;transition:box-shadow .2s}
.gs-vtesti:hover{box-shadow:var(--gs-shlg)}
.gs-vtesti-stars{display:flex;gap:.25rem;margin-bottom:1rem}
.gs-vtesti-stars i{color:var(--gs-orange-500,#F97316);font-size:.875rem}
.gs-vtesti-quote{font-style:italic;font-size:.9375rem;color:var(--gs-tx1);line-height:1.7;flex:1;margin-bottom:1.25rem;position:relative;padding-top:1.25rem}
.gs-vtesti-quote::before{content:"\201C";position:absolute;top:-.5rem;left:0;font-family:var(--gs-fd);font-size:2.5rem;font-weight:800;font-style:normal;color:var(--gs-cp);line-height:1;opacity:.3}
.gs-vtesti-author{display:flex;align-items:center;gap:.875rem;margin-top:auto}
.gs-vtesti-avatar{width:40px;height:40px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--gs-fd);font-size:.8125rem;font-weight:700;color:#fff}
.gs-vtesti-name{font-family:var(--gs-fd);font-size:.875rem;font-weight:700;color:var(--gs-tx0);margin-bottom:1px}
.gs-vtesti-role{font-size:.75rem;color:var(--gs-tx2)}
.gs-vtesti-plan{display:inline-flex;align-items:center;gap:.3rem;font-size:.625rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;padding:2px 7px;border-radius:var(--gs-rf);background:var(--gs-cp-m,#EDE9FE);color:var(--gs-cp-t,#5B21B6);margin-top:4px}
[data-theme="dark"] .gs-vtesti-plan{background:rgba(167,139,250,.22);color:#C4B5FD}
/* "Why list" cards */
.gs-why-card{display:flex;flex-direction:column;gap:.75rem;padding:1.75rem;background:var(--gs-sf1);border:1px solid var(--gs-bd1);border-radius:var(--gs-rxl);transition:box-shadow .2s,border-color .2s,transform .2s}
.gs-why-card:hover{box-shadow:var(--gs-shlg);border-color:var(--gs-cp-b);transform:translateY(-2px)}
.gs-why-icon{width:52px;height:52px;border-radius:var(--gs-rlg);display:flex;align-items:center;justify-content:center;font-size:1.375rem;flex-shrink:0}
.gs-why-title{font-family:var(--gs-fd);font-size:1.0625rem;font-weight:700;color:var(--gs-tx0)}
.gs-why-desc{font-size:.9375rem;color:var(--gs-tx1);line-height:1.65}
/* Process steps */
.gs-step{display:flex;gap:1.25rem;padding:1.5rem;background:var(--gs-sf1);border:1px solid var(--gs-bd1);border-radius:var(--gs-rxl);transition:box-shadow .2s,border-color .2s}
.gs-step:hover{box-shadow:var(--gs-shmd);border-color:var(--gs-cp-b)}
.gs-step-num{width:40px;height:40px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--gs-fd);font-size:.9375rem;font-weight:800;color:var(--gs-cp-fg,#fff);background:var(--gs-cp);box-shadow:0 4px 10px rgba(91,33,182,.28)}
.gs-step-title{font-family:var(--gs-fd);font-size:1rem;font-weight:700;color:var(--gs-tx0);margin-bottom:.375rem}
.gs-step-desc{font-size:.875rem;color:var(--gs-tx1);line-height:1.6}
/* Dark stats overlay (gs-dark-sec/-stat already present) */
.gs-dark-overlay{position:absolute;inset:0;pointer-events:none}
.gs-dark-overlay::before{content:'';position:absolute;top:-80px;left:-60px;width:440px;height:440px;border-radius:50%;background:radial-gradient(circle,rgba(91,33,182,.22) 0%,transparent 70%)}
.gs-dark-overlay::after{content:'';position:absolute;bottom:-60px;right:-40px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(61,139,55,.15) 0%,transparent 70%)}
/* CTA banner blobs + heading (gs-pricing-cta/gs-btn-white already present) */
.gs-cta-blob{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none}
.gs-cta-blob-1{width:360px;height:360px;top:-120px;right:-50px;background:rgba(255,255,255,.06)}
.gs-cta-blob-2{width:280px;height:280px;bottom:-80px;left:-30px;background:rgba(255,255,255,.04)}
.gs-cta-h2{font-family:var(--gs-fd);font-size:clamp(1.875rem,3.5vw,2.625rem);font-weight:800;letter-spacing:-.03em;line-height:1.15;color:#fff;margin-bottom:.875rem}
.gs-cta-sub{font-size:1.0625rem;color:rgba(255,255,255,.75);line-height:1.65;margin-bottom:2rem;max-width:480px}
/* "Ready to get listed?" CTA — the SECTION needs its own dark banner background (the bare .gs-pricing-cta
   class is the card-CTA helper). Targeting section.* avoids that collision. Moved here from inline styles
   so the white text is always on a dark surface and stays visible in BOTH light and dark theme. */
section.gs-pricing-cta{position:relative;overflow:hidden;text-align:center;padding:4.5rem 0;
  background:linear-gradient(135deg,#5B21B6 0%,#3a1a8a 55%,#0C0E14 100%)}
section.gs-pricing-cta .gs-cta-inner{position:relative;z-index:1;text-align:center}
.gs-cta-eyebrow{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.6);margin-bottom:.875rem}
.gs-cta-note{font-size:.75rem;color:rgba(255,255,255,.55);margin-top:1.25rem}
@media(max-width:575.98px){section.gs-pricing-cta{padding:3rem 0}}
@media(max-width:991.98px){.gs-pricing-hero{padding:3.5rem 0 2.5rem}}
@media(max-width:575.98px){.gs-pricing-hero{padding:2.5rem 0 2rem}}


/* ============================================================
 * § 28 · PHASE 1 — GLOBAL UI ENHANCEMENTS
 * Scope: typography, spacing, accessibility, consistency.
 * No class name changes. No HTML structure changes. No PHP.
 * ============================================================ */


/* -- 28.1  SKIP-TO-CONTENT LINK (accessibility) ------------ */
/* .gs-skip-link is defined in goji-framework.css §33.
 * layout.php updated to use class="gs-skip-link" (was "skip-link"). */


/* -- 28.2  BOOTSTRAP ALERT BRIDGE -------------------------- */
.alert {
  border-radius: var(--gs-radius-card-sm, 12px);
  font-size: var(--gs-text-sm);
  border-width: 1px;
  border-style: solid;
  padding: var(--gs-space-3) var(--gs-space-4);
  font-family: var(--gs-fb);
  line-height: var(--gs-leading-relaxed);
}
.alert-success {
  background-color: var(--gs-status-success-bg);
  border-color: var(--gs-status-success-border);
  color: var(--gs-status-success-text);
}
.alert-warning {
  background-color: var(--gs-status-warning-bg);
  border-color: var(--gs-status-warning-border);
  color: var(--gs-status-warning-text);
}
.alert-danger {
  background-color: var(--gs-status-error-bg);
  border-color: var(--gs-status-error-border);
  color: var(--gs-status-error-text);
}
.alert-info {
  background-color: var(--gs-status-info-bg);
  border-color: var(--gs-status-info-border);
  color: var(--gs-status-info-text);
}
.alert .btn-close { opacity: 0.5; }
.alert .btn-close:hover { opacity: 0.8; }


/* -- 28.3  IMAGE QUALITY & LAZY-LOADING -------------------- */
img { image-rendering: -webkit-optimize-contrast; }
@keyframes gs-img-reveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.gs-img-skeleton {
  background: linear-gradient(
    90deg,
    var(--gs-bg-muted) 25%,
    var(--gs-bg-emphasis) 50%,
    var(--gs-bg-muted) 75%
  );
  background-size: 200% 100%;
  animation: gs-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--gs-radius-image);
}

/* Card logo reveal */
.gs-card-tool-logo img {
  opacity: 0;
  transition: opacity var(--gs-duration-slow) var(--gs-ease-out);
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.gs-card-tool-logo img.gs-loaded {
  animation: gs-img-reveal var(--gs-duration-slow) var(--gs-ease-out) 50ms both;
}


/* -- 28.4  GLOBAL NATIVE FOCUS-VISIBLE --------------------- */
a:focus-visible,
button:not(.gs-btn):focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gs-cp);
  outline-offset: 2px;
  border-radius: var(--gs-radius-xs);
  box-shadow: var(--gs-foc, var(--gs-focus-ring));
}
.gs-nav-link:focus-visible,
.gs-footer-link:focus-visible {
  outline: 2px solid var(--gs-cp);
  outline-offset: 2px;
  border-radius: var(--gs-radius-xs);
}


/* -- 28.5  STAR RATING UTILITIES --------------------------- */
.gs-stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font-size: var(--gs-text-xs);
  color: var(--gs-orange-500, #F97316);
  letter-spacing: 0.5px;
  line-height: 1;
}
.gs-stars-sm { font-size: 0.6875rem; }
.gs-stars-md { font-size: var(--gs-text-sm); }
.gs-stars-lg { font-size: var(--gs-text-base); }
.gs-star-empty { color: var(--gs-neutral-300, #D1D5DB); }
[data-theme="dark"] .gs-star-empty { color: var(--gs-neutral-600, #4B5563); }

.gs-rating-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--gs-space-1_5);
  font-size: var(--gs-text-xs);
  color: var(--gs-tx1, var(--gs-text-secondary));
}
.gs-rating-score {
  font-family: var(--gs-fd);
  font-weight: var(--gs-weight-bold);
  font-size: var(--gs-text-sm);
  color: var(--gs-tx0, var(--gs-text-primary));
  font-variant-numeric: tabular-nums;
}


/* -- 28.6  FLUID SECTION HEADINGS (clamp) ------------------ */
.gs-h1,
.disc-h1 {
  font-size: clamp(2rem, 4.5vw + 0.5rem, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  font-optical-sizing: auto;
}
.gs-blog-h1,
.gs-art-h1 {
  font-size: clamp(1.75rem, 3.5vw + 0.5rem, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
}
.gs-cat-h1,
.gs-contact-h1,
.gs-pricing-h1,
.gs-compare-h1,
.gs-404-h1 {
  font-size: clamp(1.75rem, 3vw + 0.5rem, 2.5rem);
  letter-spacing: -0.025em;
  line-height: 1.15;
}

/* Eyebrow labels */
.gs-eyebrow,
.gs-section-eyebrow,
.gs-blog-eyebrow {
  font-size: var(--gs-text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gs-cp-t, #5B21B6);
  margin-bottom: var(--gs-space-2);
  display: block;
}
[data-theme="dark"] .gs-eyebrow,
[data-theme="dark"] .gs-section-eyebrow,
[data-theme="dark"] .gs-blog-eyebrow { color: var(--gs-cp-t); }

/* Section title — fluid */
.gs-sec-title {
  font-family: var(--gs-fd);
  font-size: clamp(1.5rem, 2.5vw + 0.5rem, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--gs-tx0, var(--gs-text-primary));
}
.gs-sec-title .acc {
  color: var(--gs-cp-t);
  font-style: italic;
}


/* -- 28.7  PROSE & LEAD TEXT QUALITY ----------------------- */
.gs-prose {
  line-height: 1.72;
  letter-spacing: -0.01em;
  max-width: 68ch;
}
.gs-prose p { margin-bottom: var(--gs-space-5); }
.gs-prose > *:last-child { margin-bottom: 0; }

.gs-lead,
.gs-hero-lead,
.disc-hero-lead {
  font-size: clamp(1rem, 1.5vw + 0.25rem, 1.1875rem);
  line-height: 1.65;
  color: var(--gs-tx1, var(--gs-text-secondary));
  letter-spacing: -0.005em;
}


/* -- 28.8  CATEGORY & BENEFIT CARD HOVER CONSISTENCY ------- */
.gs-cat-card {
  transition: box-shadow var(--gs-duration-normal) var(--gs-ease-out),
              border-color var(--gs-duration-normal) var(--gs-ease-out),
              transform var(--gs-duration-normal) var(--gs-ease-out);
}
.gs-cat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--gs-shlg);
  border-color: var(--gs-cp-b);
}
.gs-cat-card:focus-visible {
  outline: 2px solid var(--gs-cp);
  outline-offset: 2px;
}

.gs-ben-card {
  transition: box-shadow var(--gs-duration-normal) var(--gs-ease-out),
              border-color var(--gs-duration-normal) var(--gs-ease-out),
              transform var(--gs-duration-normal) var(--gs-ease-out);
}
.gs-ben-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--gs-shlg);
  border-color: var(--gs-cp-b);
}


/* -- 28.9  WHY-CARD, STEP & VTESTI HOVER CONSISTENCY ------- */
.gs-why-card:hover {
  box-shadow: var(--gs-shlg);
  border-color: var(--gs-cp-b);
  transform: translateY(-3px);
}
.gs-vtesti:hover {
  box-shadow: var(--gs-shxl, 0 24px 32px rgba(91,33,182,0.12));
  transform: translateY(-2px);
  border-color: var(--gs-cp-b);
}
.gs-dark-stat { transition: transform var(--gs-duration-normal) var(--gs-ease-out); }
.gs-dark-stat:hover { transform: translateY(-2px); }


/* -- 28.10  FORM FIELD CONSISTENCY (auth views) ------------ */
.gs-form-group { gap: var(--gs-space-2); }
.gs-err-msg {
  font-size: var(--gs-text-xs);
  color: var(--gs-error, #DC2626);
  margin-top: var(--gs-space-1);
  display: none;
  line-height: 1.35;
}
.gs-form-group.has-error .gs-err-msg { display: block; }
.gs-form-group.has-error .gs-input,
.gs-form-group.has-error .gs-select {
  border-color: var(--gs-error, #DC2626);
  background-color: var(--gs-status-error-bg, #FEF2F2);
}


/* -- 28.11  SCROLLBAR (webkit) ----------------------------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--gs-bd2, var(--gs-border-strong));
  border-radius: 9999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--gs-cp-b, #DDD6FE);
  background-clip: content-box;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
  background-clip: content-box;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(167,139,250,0.35);
  background-clip: content-box;
}


/* -- 28.12  PRINT IMPROVEMENTS ----------------------------- */
@media print {
  .gs-card,
  .gs-card-tool,
  .gs-blog-card,
  .gs-pricing-card {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    break-inside: avoid;
  }
  .gs-navbar,
  .gs-topbar,
  .gs-footer,
  .gs-sidebar,
  .gs-drawer { display: none !important; }
}


/* ============================================================
 * § 29 · PHASE 2 — Navigation, Mega Menu, Drawer, Footer
 * Scope: Header, nav bar, mega menu, mobile drawer, footer.
 * Rules: CSS only — no PHP logic changed; all content/routes
 *        preserved. Removes inline styles via equivalent rules.
 * ============================================================ */

/* ── 29.1  Navbar — scrolled glass state ──────────────────── */
/* goji-main.js Navbar module adds .scrolled when scrollY > 8px */
.gs-navbar.scrolled {
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: 0 2px 16px rgba(17, 24, 39, 0.10),
              0 1px 4px  rgba(91, 33, 182, 0.06);
  border-bottom-color: transparent;
}
[data-theme="dark"] .gs-navbar.scrolled {
  background: rgba(15, 23, 42, 0.95);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.28),
              0 1px 4px  rgba(0, 0, 0, 0.20);
}

/* ── 29.2  Navbar — chevron rotation when mega menu open ──── */
/* Replaces inline style="font-size:.65rem" on the chevron icon */
.gs-nav-chevron {
  font-size: .625rem;
  margin-left: .125rem;
  vertical-align: middle;
  transition: transform .22s var(--gs-ease-out, cubic-bezier(.2,.8,.4,1));
}
#gs-nav-trigger[aria-expanded="true"] .gs-nav-chevron {
  transform: rotate(180deg);
}

/* HOT pill — minor vertical rhythm fix */
.gs-nav-pill {
  font-size: .575rem;
  vertical-align: 1px;
}
/* HOT badge → small raised corner badge hugging the "Deals" label (not a wide inline pill) */
.gs-nav-link-hot { position: relative; }
.gs-nav-pill.gs-nav-pill-hot {
  font-size: .5rem;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 1px 4px;
  margin-left: 1px;
  line-height: 1.1;
  vertical-align: top;
  position: relative;
  top: -.5rem;
  background: var(--gs-or-500, #f97316);
  color: #fff;
}

/* ── 29.3  Navbar — logo sizing (replaces inline style) ────── */
.gs-logo-img {
  height: 55px;
  width: auto;
  display: block;
}

/* ── 29.4  Navbar — action buttons sizing normalisation ────── */
/* Overrides the inline height/padding/font-size on .gs-btn-md
   buttons inside .gs-nav-actions without touching PHP */
.gs-nav-actions .gs-btn.gs-btn-md {
  height: 36px;
  padding: 0 1rem;
  font-size: .8125rem;
}

/* ── 29.5  Navbar — search icon button ─────────────────────── */
/* New .gs-nav-search-btn added to nav actions in layout.php */
.gs-nav-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  color: var(--gs-tx1);
  border-radius: var(--gs-rmd);
  cursor: pointer;
  text-decoration: none;
  font-size: .9375rem;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.gs-nav-search-btn:hover {
  background: var(--gs-bg2);
  color: var(--gs-tx0);
  text-decoration: none;
}
.gs-nav-search-btn:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--gs-foc);
  border-radius: var(--gs-rmd);
}
@media (max-width: 991.98px) {
  /* Hide search btn on mobile — drawer has its own search input */
  .gs-nav-search-btn { display: none; }
}

/* ── 29.6  Mega menu — inline style replacements ───────────── */
/* "View all categories" de-emphasis (replaces style="opacity:.85") */
.gs-mega-cat-all {
  opacity: .85;
}
.gs-mega-cat-all:hover,
.gs-mega-cat-all:focus-visible {
  opacity: 1;
}
/* Tool logo fallback span centring (replaces inline flex styles) */
span.gs-mega-tool-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Accessible focus rings across all mega menu interactive items */
.gs-mega-cat-item:focus-visible,
.gs-mega-subcat-link:focus-visible,
.gs-mega-tool-item:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--gs-foc);
  border-radius: var(--gs-rmd);
}

/* ── 29.7  Mobile drawer — inline style replacements ─────── */
/* Brand mark & name sizing in drawer (replaces 3 inline styles) */
.gs-drawer .gs-brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}
.gs-drawer .gs-brand-mark svg {
  width: 16px;
  height: 16px;
}
.gs-drawer .gs-brand-name {
  font-size: 1.0625rem;
}
/* Ensure 44 px minimum touch target on drawer links */
.gs-drawer-link {
  min-height: 44px;
}
/* Active state for current-page links in drawer
   (goji-main.js Navbar._markActive adds .active class) */
.gs-drawer-link.active {
  background: var(--gs-cp-m);
  color: var(--gs-cp-t);
  font-weight: 600;
}
.gs-drawer-link.active i {
  color: var(--gs-cp);
}
/* Search input transition (focus already sets border-color) */
.gs-drawer-search-inp {
  transition: border-color .15s, box-shadow .15s;
}
/* Section label — tighter tracking */
.gs-drawer-section-label {
  letter-spacing: .09em;
}

/* ── 29.8  Footer — inline style replacements ───────────── */
/* Contact list (replaces the long style= block in layout.php) */
.gs-footer-contact {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  font-size: .875rem;
  color: rgba(255, 255, 255, .6);
}
.gs-footer-contact i {
  opacity: .75;
}
/* Footer grid padding (removes need for Bootstrap pt-5 pb-4) */
.gs-footer-grid {
  padding-top: 3.5rem;
  padding-bottom: 2.5rem;
}
/* Footer social icon — improve touch target & add lift hover */
.gs-footer-soc {
  transition: background .15s, color .15s, transform .15s;
}
.gs-footer-soc:hover {
  transform: translateY(-2px);
}
/* Footer bottom — responsive stacking on small screens */
@media (max-width: 575.98px) {
  .gs-footer-bottom {
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    text-align: center;
    padding-inline: 1rem;
  }
  .gs-footer-legal {
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem 1rem;
  }
}

/* ── 29.9  Topbar — close button touch target & focus ──────── */
.gs-topbar-close:hover {
  background: rgba(255, 255, 255, .15);
}
.gs-topbar-close:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .7);
  outline-offset: 2px;
  border-radius: var(--gs-rmd);
}


/* ============================================================
 * § 30 · PHASE 3 — Homepage sections
 * Scope: hero, strip, categories, tools grid, benefits,
 *        statistics, testimonials, newsletter, section headers.
 * Rules: CSS only (+ targeted PHP class-swap & inline-style
 *        removals). Content/links/routes unchanged.
 * ============================================================ */

/* ── 30.1  Hero — breathing room ────────────────────────── */
.gs-hero {
  padding: 5.5rem 0 4.5rem;
}
@media (max-width: 767.98px) {
  .gs-hero { padding: 4rem 0 3.5rem; }
}
/* Position context for blobs (replaces inline z-index on container) */
.gs-hero > .gs-container {
  position: relative;
  z-index: 1;
}
/* Blobs — slightly more visible for depth */
.gs-blob { opacity: .14; }
.gs-blob-1 { opacity: .18; width: 480px; height: 480px; }

/* Eyebrow badge — more breathing room */
.gs-eyebrow-badge {
  font-size: .875rem;
  padding: .4rem 1rem;
  margin-bottom: 1.25rem;
}
/* Hero h1 — bolder clamp for large viewports */
.gs-h1 {
  font-size: clamp(2.25rem, 5.5vw, 3.75rem);
  line-height: 1.08;
  margin-bottom: 1.375rem;
}
/* Lead — slightly larger for readability */
.gs-hero-lead {
  font-size: 1.125rem;
  line-height: 1.72;
  max-width: 38rem;
}
/* Search input — smooth hover state */
.gs-hs-input {
  transition: border-color .2s, box-shadow .2s;
}
.gs-hs-input:hover:not(:focus) {
  border-color: var(--gs-cp-b, #DDD6FE);
}
/* CTA ghost button bordered variant (replaces inline border style) */
.gs-btn-ghost-bordered {
  border: 2px solid var(--gs-bd1, #E5E7EB);
}
.gs-btn-ghost-bordered:hover {
  border-color: var(--gs-cp-b, #DDD6FE);
  background: var(--gs-cp-s, #F5F3FF);
  color: var(--gs-cp, #5B21B6);
}
/* Hint chip deal icon (replaces inline color+size) */
.gs-hint-deal-icon {
  color: var(--or-500, #F97316);
  font-size: .6875rem;
}
/* Trust row — refined spacing & stronger signal */
.gs-trust-row {
  gap: 1.5rem;
  margin-top: 1.75rem;
}
.gs-trust-item {
  font-weight: 500;
  font-size: .8125rem;
}
.gs-trust-item i {
  font-size: 1.0625rem;
}
/* Float badges — richer elevation */
.gs-float-badge {
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12), 0 2px 8px rgba(91, 33, 182, .08);
  font-size: .75rem;
  padding: .5rem .95rem;
}
/* Hero dashboard card — deeper shadow */
.gs-dash-card {
  box-shadow: 0 24px 40px rgba(91, 33, 182, .12), 0 8px 16px rgba(17, 24, 39, .07);
}
/* Dash tool logo img (replaces inline style on <img>) */
.gs-dash-tool-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
}
/* Dash tool info wrapper (replaces inline flex:1;min-width:0) */
.gs-dash-tool-info {
  flex: 1;
  min-width: 0;
}

/* ── 30.2  Social-proof strip ────────────────────────────── */
.gs-strip {
  background: linear-gradient(90deg, #070910 0%, #0f1424 50%, #070910 100%);
  border-top: 1px solid rgba(255, 255, 255, .04);
  border-bottom: 1px solid rgba(255, 255, 255, .04);
  padding: 2.25rem 0;
}
/* Vertical rule between strip items on md+ */
.gs-strip-item {
  position: relative;
}
@media (min-width: 768px) {
  .gs-strip-item + .gs-strip-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 2.5rem;
    background: rgba(255, 255, 255, .07);
  }
}
/* Stat number — bolder visual weight */
.gs-strip-val {
  font-size: 2.125rem;
  letter-spacing: -.04em;
  margin-bottom: .25rem;
}
.gs-strip-lbl {
  font-size: .8125rem;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .5);
}

/* ── 30.3  Categories section ───────────────────────────── */
/* Cat card — CSS now owns display/height; inline style removed from PHP */
.gs-cat-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* Icon — larger, rounder, animated on hover */
.gs-cat-card .gs-cat-icon {
  width: 52px;
  height: 52px;
  border-radius: .875rem;
  font-size: 1.5rem;
  margin-bottom: 1.125rem;
  transition: background .22s, color .22s, transform .22s;
}
.gs-cat-card:hover .gs-cat-icon {
  background: var(--gs-cp, #5B21B6);
  transform: scale(1.06);
}
/* Name — slightly bolder */
.gs-cat-name { font-size: 1rem; }
.gs-cat-count {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: .75rem;
    font-weight: 500;
    color: var(--gs-text-tertiary);
    margin-top: auto;
    padding-top: .5rem;
    transition: color .15s;
}
.gs-cat-card:hover .gs-cat-count { opacity: 1; transform: translateX(0); }
@media (hover: none) {
  /* Always show "Explore" on touch devices */
  .gs-cat-count { opacity: 1; transform: none; color: var(--gs-tx2); font-weight: 500; }
}

/* ── 30.4  Section headers — eyebrow badge style ─────────── */
/* Restore badge treatment on eyebrows inside .gs-sec */
.gs-sec .gs-eyebrow,
.gs-sec-alt .gs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  background: var(--gs-cp-s, #F5F3FF);
  border: 1px solid var(--gs-cp-b, #DDD6FE);
  border-radius: var(--gs-rf);
  padding: .25rem .875rem;
  font-size: .7rem;
  letter-spacing: .1em;
  margin-bottom: .875rem;
  color: var(--gs-cp-t, var(--gs-cp));
  font-weight: 700;
  text-transform: uppercase;
}
[data-theme="dark"] .gs-sec .gs-eyebrow,
[data-theme="dark"] .gs-sec-alt .gs-eyebrow {
  background: rgba(91, 33, 182, .16);
  border-color: rgba(196, 181, 253, .30);
  color: #C4B5FD;
}
/* "View all" button border refinement */
.gs-sec .gs-btn-ghost.gs-btn-sm,
.gs-sec-alt .gs-btn-ghost.gs-btn-sm {
  border: 1.5px solid var(--gs-bd1);
  font-weight: 600;
  white-space: nowrap;
}
.gs-sec .gs-btn-ghost.gs-btn-sm:hover,
.gs-sec-alt .gs-btn-ghost.gs-btn-sm:hover {
  border-color: var(--gs-cp-b);
  color: var(--gs-cp);
}

/* ── 30.5  Benefits cards ───────────────────────────────── */
/* Left border accent on hover */
.gs-ben-card {
  border-left: 3px solid transparent;
  transition: box-shadow .22s, border-color .22s, transform .22s;
}
.gs-ben-card:hover {
  border-left-color: var(--gs-cp, #5B21B6);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(91, 33, 182, .09), 0 4px 8px rgba(17, 24, 39, .05);
}
/* Icon — slightly larger */
.gs-ben-icon {
  width: 56px;
  height: 56px;
  border-radius: 1rem;
  margin-bottom: 1.25rem;
}

/* ── 30.6  Statistics section ───────────────────────────── */
/* Container z-index (replaces inline style) */
.gs-container-rel {
  position: relative;
  z-index: 1;
}
/* Stats section title light variant */
.gs-sec-title-light { color: #fff; }

/* Dark section — richer background + radial glow */
.gs-sec-dark {
  background: linear-gradient(140deg, #060610 0%, #0d1128 50%, #060810 100%);
  position: relative;
  overflow: hidden;
}

/* Stat numbers in dark section — display size */
.gs-sec-dark .gs-stat-num {
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-family: var(--gs-fd, 'Plus Jakarta Sans', sans-serif);
  letter-spacing: -.04em;
  display: block;
  line-height: 1;
  margin-bottom: .375rem;
}
.gs-sec-dark .gs-stat-lbl {
  font-size: .8125rem;
  letter-spacing: .04em;
  font-weight: 500;
}
/* Stat card in dark section — dividers */
.gs-sec-dark .gs-stat-card {
  padding: 2.5rem 1rem 2rem;
  text-align: center;
}
@media (min-width: 768px) {
  .gs-sec-dark .gs-stat-card { border-right: 1px solid rgba(255, 255, 255, .07); }
  .gs-sec-dark .col-md-3:last-child .gs-stat-card { border-right: none; }
}
@media (max-width: 767.98px) {
  .gs-sec-dark .gs-stat-card { border-bottom: 1px solid rgba(255, 255, 255, .07); }
  .gs-sec-dark .col-6:nth-child(odd) .gs-stat-card { border-right: 1px solid rgba(255, 255, 255, .07); }
}

/* ── 30.7  Testimonials ──────────────────────────────────── */
/* Card — stronger hover lift */
.gs-testi {
  transition: transform .22s, box-shadow .22s, border-color .22s;
}
.gs-testi:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 32px rgba(91, 33, 182, .11), 0 6px 12px rgba(17, 24, 39, .06);
  border-color: var(--gs-cp-b, #DDD6FE);
}
/* Stars — slightly bigger */
.gs-testi-stars i { font-size: .9375rem; }
/* Quote — slightly larger */
.gs-testi-quote { font-size: .9375rem; line-height: 1.7; }
/* Quote open mark — more prominent */
.gs-testi-quote::before {
  font-size: 3rem;
  opacity: .25;
  color: var(--gs-cp, #5B21B6);
}
/* Name — tighter tracking */
.gs-testi-name { letter-spacing: -.01em; }

/* ── 30.8  Newsletter section ────────────────────────────── */
/* Richer gradient */
.gs-nl-sec {
  background: linear-gradient(140deg, #3B0D8F 0%, #5B21B6 45%, #3B21B6 100%);
  padding: 5.5rem 0;
}
/* Eyebrow in NL section */
.gs-nl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .25rem .875rem;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--gs-rf);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .85);
  margin-bottom: 1rem;
}
/* Benefits list items — flex alignment for icon + text */
.gs-nl-benefits li {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  font-size: .9375rem;
  color: rgba(255, 255, 255, .88);
  line-height: 1.6;
  margin-bottom: .625rem;
}
.gs-nl-benefits li i {
  color: #4ADE80;
  flex-shrink: 0;
  margin-top: 3px;
  font-size: 1rem;
}
/* Form wrap — deeper glass effect */
.gs-nl-form-wrap {
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 8px 40px rgba(0, 0, 0, .20), inset 0 1px 0 rgba(255, 255, 255, .15);
  border-radius: var(--gs-rxl);
  padding: 2.25rem;
}
/* Newsletter form layout */
.gs-nl-form {
  background: none;
  border: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
/* Submit button — correct styling (gs-nl-sub was the subtitle text class) */
.gs-nl-sub-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  height: 50px;
  border: none;
  border-radius: var(--gs-rf);
  background: #fff;
  color: #5B21B6;
  font-family: var(--gs-fd);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: background .18s, box-shadow .18s, transform .12s;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
}
.gs-nl-sub-btn:hover {
  background: #F5F3FF;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .24);
  transform: translateY(-1px);
}
.gs-nl-sub-btn:active { transform: translateY(0); }
/* Disclaimer */
.gs-nl-disclaimer {
  font-size: .75rem;
  color: rgba(255, 255, 255, .48);
  line-height: 1.5;
  text-align: center;
}
.gs-nl-disclaimer a {
  color: rgba(255, 255, 255, .65);
  text-decoration: underline;
}
.gs-nl-disclaimer a:hover { color: #fff; }

/* ── 30.9  Dark overlay (gs-dark-overlay in stats section) ── */
/* Already defined earlier; enhance the dark section overlay */
.gs-sec-dark .gs-dark-overlay {
  background: none;
}
.gs-sec-dark .gs-dark-overlay::before {
  top: -100px;
  left: -80px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(91, 33, 182, .22) 0%, transparent 70%);
}
.gs-sec-dark .gs-dark-overlay::after {
  bottom: -80px;
  right: -60px;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(61, 139, 55, .15) 0%, transparent 70%);
}

/* ── 30.10  Section consistency ──────────────────────────── */
/* Consistent section padding for all homepage sections */
.gs-sec, .gs-sec-alt { padding: 5.5rem 0; }
@media (max-width: 767.98px) {
  .gs-sec, .gs-sec-alt { padding: 4rem 0; }
}
/* Section title sizing */
.gs-sec-title {
  font-size: clamp(1.625rem, 3vw, 2.375rem);
  letter-spacing: -.032em;
  line-height: 1.15;
}
/* Dark section padding */
.gs-sec-dark { padding: 5.5rem 0; }
@media (max-width: 767.98px) { .gs-sec-dark { padding: 4rem 0; } }


/* ============================================================
 * § 31 · PHASE 4 — Listing, Category, Search, Compare, Deals
 * Scope: tool cards, filters, sort/view toggle, pagination,
 *        sub-category strip, compare table, CTAs, empty states.
 * Rules: CSS only (+ targeted class-swap / inline-style removal
 *        in PHP views). Content/routes/PHP logic unchanged.
 * ============================================================ */

/* ── 31.1  Tool card — visual improvements ───────────────── */

/* Equal-width footer buttons (replaces style="flex:1") */
.gs-card-tool-footer .gs-ct-action { flex: 1; }

/* Category label — pill badge treatment */
.gs-card-tool .gs-card-tool-cat {
  display: inline-flex;
  align-items: center;
  font-size: .6875rem;
  font-weight: 600;
  color: var(--gs-cp-t, var(--gs-cp));
  background: var(--gs-cp-s, #F5F3FF);
  border-radius: var(--gs-rf);
  padding: .15rem .55rem;
  line-height: 1.4;
  max-width: 13rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-theme="dark"] .gs-card-tool .gs-card-tool-cat {
  background: rgba(91, 33, 182, .18);
  color: #C4B5FD;
}

/* Stars — slightly larger for readability */
.gs-card-tool-stars { font-size: .875rem; letter-spacing: 1.5px; }

/* Price — stronger visual weight */
.gs-card-tool-price { font-size: .8125rem; font-weight: 600; color: var(--gs-tx1); }

/* Free price — green badge */
.gs-card-tool-price-free {
  color: var(--gs-cs, #15803D);
  background: rgba(21, 128, 61, .09);
  border-radius: var(--gs-rf);
  padding: .1rem .5rem;
  font-weight: 700;
}
[data-theme="dark"] .gs-card-tool-price-free {
  background: rgba(74, 222, 128, .12);
  color: #4ADE80;
}

/* Paid price — same weight, primary ink */
.gs-card-tool-price-paid {
  color: var(--gs-tx0);
  font-weight: 700;
}

/* Description — clamp enforced */
.gs-card-tool-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Focus-within ring for keyboard users */
.gs-card-tool:focus-within {
  border-color: var(--gs-cp-b);
  box-shadow: 0 0 0 3px rgba(91, 33, 182, .12);
}

/* ── 31.2  Page hero — listings & search ────────────────── */

/* More breathing room + subtle gradient */
.disc-hero {
  padding: 2.75rem 0 2.25rem;
  background: linear-gradient(180deg, var(--gs-bg1, #F9FAFB) 0%, var(--gs-bg0, #fff) 100%);
}
[data-theme="dark"] .disc-hero {
  background: linear-gradient(180deg, var(--gs-bg2) 0%, var(--gs-bg0) 100%);
}

/* H1 — tighter tracking, bolder clamp */
.disc-h1 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  letter-spacing: -.035em;
}

/* Lead — slightly larger */
.disc-hero-lead { font-size: 1.0625rem; }

/* ── 31.3  Results bar & listing container ───────────────── */

/* Bottom padding (replaces style="padding-bottom:4rem") */
.gs-listing-body { padding-bottom: 4rem; }

/* Results / sort bar — used by listing.php & search.php */
.gs-listing-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem .75rem;
  padding: 1.125rem 0;
  border-bottom: 1px solid var(--gs-bd0);
  margin-bottom: 1.5rem;
}
/* Smaller variant for search (no sort controls) */
.gs-listing-bar.gs-listing-bar-sm { padding: .875rem 0; margin-bottom: 1.25rem; }

/* ── 31.4  Filter / sort toolbar enhancements ────────────── */

/* Filter bar — background card for contrast */
.gs-filter-bar {
  background: var(--gs-sf0);
  border-radius: var(--gs-rlg);
  border: 1px solid var(--gs-bd0);
  padding: .75rem 1.25rem;
  margin-top: .25rem;
  margin-bottom: 1.5rem;
  border-bottom: none; /* override the hairline-only default */
}
[data-theme="dark"] .gs-filter-bar { background: var(--gs-bg1); }

/* Sort select — refined */
.gs-sort-select {
  background-color: var(--gs-bg0);
  border-radius: var(--gs-rmd);
  font-size: .8125rem;
  color: var(--gs-tx0);
  transition: border-color .15s, box-shadow .15s;
  cursor: pointer;
}
.gs-sort-select:hover { border-color: var(--gs-cp-b); }
.gs-sort-select:focus { border-color: var(--gs-cp); box-shadow: var(--gs-foc); outline: none; }

/* View toggle — cleaner */
.gs-view-toggle {
  background: var(--gs-bg0);
  border: 1px solid var(--gs-bd1);
  border-radius: var(--gs-rmd);
  padding: 3px;
}
.gs-vt-btn {
  width: 34px;
  height: 30px;
  border-radius: calc(var(--gs-rmd) - 2px);
  font-size: .875rem;
  transition: background .15s, color .15s;
}
.gs-vt-btn.active {
  background: var(--gs-cp-s);
  color: var(--gs-cp);
  box-shadow: 0 1px 4px rgba(91, 33, 182, .15);
}

/* ── 31.5  Sub-category strip ────────────────────────────── */

/* Sticky under navbar when scrolling */
.gs-subcat-strip {
  position: sticky;
  top: var(--gs-navbar-height, 4rem);
  z-index: 90;
  background: var(--gs-bg0);
  border-top: 1px solid var(--gs-bd0);
  border-bottom: 1px solid var(--gs-bd0);
  padding: .625rem 0;
  margin-bottom: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}
[data-theme="dark"] .gs-subcat-strip { background: var(--gs-bg1); }

/* Inner wrapper — horizontal scroll on mobile, wrap on desktop */
.gs-subcat-inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: .375rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 1px;
}
.gs-subcat-inner::-webkit-scrollbar { display: none; }
@media (min-width: 768px) {
  .gs-subcat-inner { flex-wrap: wrap; overflow-x: visible; }
}

/* Chip — improved spacing, transitions */
.gs-subcat-chip {
  padding: .375rem 1rem;
  font-size: .8125rem;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color .15s, background .15s, color .15s;
  cursor: pointer;
}
.gs-subcat-chip:hover {
  background: var(--gs-cp-s);
  border-color: var(--gs-cp-b);
  color: var(--gs-cp-t, var(--gs-cp));
  text-decoration: none;
}
/* Active state — filled pill */
.gs-subcat-chip.active {
  background: var(--gs-cp);
  border-color: var(--gs-cp);
  color: var(--gs-cp-fg, #fff);
  font-weight: 600;
}
.gs-subcat-chip.active:hover { background: var(--gs-cp-t); }
[data-theme="dark"] .gs-subcat-chip { background: var(--gs-bg2); border-color: var(--gs-bd1); color: var(--gs-tx1); }
[data-theme="dark"] .gs-subcat-chip:hover { background: rgba(91, 33, 182, .2); border-color: rgba(167, 139, 250, .4); color: #C4B5FD; }
[data-theme="dark"] .gs-subcat-chip.active { background: var(--gs-cp); border-color: var(--gs-cp); color:var(--gs-cp-fg,#fff); }

/* Sub-category chip count */
.gs-subcat-chip-count { font-size: .75rem; opacity: .7; margin-left: .25rem; }

/* ── 31.6  Category page hero ────────────────────────────── */

/* Cat hero container z-index now via gs-container-rel (defined in §30.6) */

/* More padding */
.gs-cat-hero { padding: 2.75rem 0 2.25rem; }

/* Category search form — wider max */
.gs-cat-search-form { max-width: 38rem; }
.gs-cat-search-input { height: 48px; font-size: .9375rem; }

/* Tool grid top spacing (replaces style="margin-top:1.5rem") */
.gs-tool-grid-wrap { margin-top: 1.5rem; }

/* ── 31.7  Pagination ────────────────────────────────────── */

.gs-pagination-center {
  justify-content: center;
  margin-top: 2.5rem;
}
.gs-page-btn {
  min-width: 2.25rem;
  height: 2.25rem;
  font-size: .875rem;
  font-weight: 600;
  border-radius: var(--gs-rmd);
  transition: background .15s, border-color .15s, color .15s, transform .1s, box-shadow .15s;
}
.gs-page-btn:hover:not(.active):not([aria-disabled="true"]) {
  border-color: var(--gs-cp-b);
  color: var(--gs-cp);
  transform: translateY(-1px);
}
.gs-page-btn.active {
  box-shadow: 0 2px 8px rgba(91, 33, 182, .28);
}

/* ── 31.8  Empty state icon ──────────────────────────────── */

/* Replaces inline style="font-size:2.5rem;color:var(--gs-tx2)" on icons */
.gs-empty-icon {
  font-size: 2.5rem;
  color: var(--gs-tx2);
  display: block;
  margin-bottom: .25rem;
}

/* ── 31.9  Compare page ──────────────────────────────────── */

/* Quick-suggestion chips (replace inline height/font/padding/radius) */
.gs-cmp-chip {
  height: 28px;
  font-size: .75rem;
  padding: 0 .625rem;
  border-radius: var(--gs-rf);
  font-weight: 600;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.gs-cmp-chip:hover {
  background: var(--gs-cp-s);
  border-color: var(--gs-cp-b);
  color: var(--gs-cp-t, var(--gs-cp));
  transform: translateY(-1px);
}

/* "Try:" label (replaces inline style) */
.gs-cmp-try-label {
  font-size: .75rem;
  font-weight: 600;
  color: var(--gs-tx2);
  align-self: center;
  flex-shrink: 0;
}

/* Compare Now button — full width (replaces style="width:100%;white-space:nowrap") */
.gs-cmp-go-btn { width: 100%; white-space: nowrap; }

/* Compare table — alternating row tint for readability */
.cmp-table tbody tr:nth-child(even) td {
  background: var(--gs-bg1);
}
.cmp-table tbody tr:nth-child(even) td.cmp-col-hl {
  background: rgba(91, 33, 182, .055);
}
[data-theme="dark"] .cmp-table tbody tr:nth-child(even) td { background: var(--gs-bg2); }
[data-theme="dark"] .cmp-table tbody tr:nth-child(even) td.cmp-col-hl { background: rgba(109, 40, 217, .12); }

/* Column label column — narrower min-width on mobile */
@media (max-width: 575.98px) {
  .cmp-table th:first-child,
  .cmp-table td:first-child { min-width: 120px; }
  .cmp-table-wrap { border-radius: var(--gs-rmd); }
}

/* Check/cross icons — slightly larger */
.cmp-check-yes { font-size: 1.25rem; }
.cmp-check-no  { font-size: 1.125rem; opacity: .45; }

/* Compare builder — more elevation */
.cmp-builder {
  box-shadow: 0 8px 32px rgba(91, 33, 182, .10), 0 2px 8px rgba(17, 24, 39, .05);
}

/* VS badge — branded */
.cmp-vs-badge {
  width: 40px;
  height: 40px;
  background: var(--gs-cp-s);
  border-color: var(--gs-cp-b);
  color: var(--gs-cp-t, var(--gs-cp));
  font-size: .75rem;
}

/* Popular comparison cards — logo scale on hover */
.cmp-card-logo { transition: transform .2s; }
.cmp-card:hover .cmp-card-logo { transform: scale(1.08); }

/* CTA section — taller, stronger presence */
.cmp-cta { padding: 5rem 0; }
@media (max-width: 767.98px) { .cmp-cta { padding: 3.5rem 0; } }

/* Compare sections — more breathing room */
.cmp-section { padding: 4rem 0; }
@media (max-width: 767.98px) { .cmp-section { padding: 2.75rem 0; } }

/* Hero — taller */
.cmp-hero { padding: 4rem 0 3.5rem; }
@media (max-width: 767.98px) { .cmp-hero { padding: 2.75rem 0 2.25rem; } }

/* ── 31.10  CTA visibility — dark-section & page CTAs ────── */

/* White buttons in dark sections — bolder */
.gs-btn-white {
  font-weight: 700;
  letter-spacing: -.01em;
  transition: background .18s, box-shadow .18s, transform .12s;
}
.gs-btn-white:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
  transform: translateY(-1px);
}
.gs-btn-white:active { transform: translateY(0); }

/* Outline ghost variant on dark — clearer border */
.gs-btn-white-outline {
  font-weight: 600;
  transition: background .18s, transform .12s;
}
.gs-btn-white-outline:hover {
  background: rgba(255, 255, 255, .14);
  transform: translateY(-1px);
}

/* CTA Compare Now align with view — remove button stretches on mobile */
@media (max-width: 575.98px) {
  .gs-cmp-go-btn { width: 100%; }
}

/* Deals listing — hint badge (for future use via PHP class addition) */
.gs-deal-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .625rem;
  background: rgba(249, 115, 22, .12);
  color: var(--or-500, #F97316);
  border-radius: var(--gs-rf);
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}


/* ============================================================
 * § 32 · MEGA MENU v2 + MOBILE DRAWER TWO-PANEL
 * Fixes: button-based Zone A tabs, 3-col subcats, panel header,
 * two-panel sliding mobile drawer with category browser.
 * ============================================================ */

/* ── 32.1  Zone A — button reset (now <button> not <a>) ──── */
button.gs-mega-cat-item {
  width: 100%;
  border: none;
  background: none;
  font-family: inherit;
  text-align: left;
}
.gs-mega-cat-name  { flex: 1; min-width: 0; }
.gs-mega-cat-arrow {
  font-size: .7rem;
  flex-shrink: 0;
  color: var(--gs-tx2);
  margin-left: auto;
  transition: color .15s;
  pointer-events: none;
}
.gs-mega-cat-item.active .gs-mega-cat-arrow { color: var(--gs-cp-t); }
/* "All Categories" link — slightly de-emphasised */
.gs-mega-cat-all-link {
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px solid var(--gs-bd0);
  opacity: .8;
}
.gs-mega-cat-all-link:hover,
.gs-mega-cat-all-link:focus-visible { opacity: 1; }

/* ── 32.2  Zone B — panel header ─────────────────────────── */
.gs-mega-panel-hd {
  margin-bottom: 1.125rem;
  padding-bottom: .875rem;
  border-bottom: 1px solid var(--gs-bd0);
}
.gs-mega-panel-hd-top {
  display: flex;
  align-items: center;
  gap: .625rem;
  flex-wrap: wrap;
}
.gs-mega-panel-badge {
  display: inline-flex;
  align-items: center;
  gap: .3125rem;
  background: var(--gs-cp-s);
  color: var(--gs-cp-t);
  font-size: .6875rem;
  font-weight: 700;
  padding: .2rem .5625rem;
  border-radius: var(--gs-rf);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.gs-mega-panel-count {
  font-size: .75rem;
  color: var(--gs-tx2);
  font-weight: 500;
}
.gs-mega-panel-link {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--gs-cp-t);
  text-decoration: none;
  margin-left: auto;
  white-space: nowrap;
  flex-shrink: 0;
}
.gs-mega-panel-link:hover { text-decoration: underline; }
.gs-mega-panel-desc {
  margin: .375rem 0 0;
  font-size: .8125rem;
  color: var(--gs-tx2);
  line-height: 1.5;
}

/* Bullet dot for text-only subcategories (no icon stored) */
.gs-mega-subcat-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gs-tx2);
  flex-shrink: 0;
  transition: background .15s;
}
.gs-mega-subcat-link:hover .gs-mega-subcat-dot { background: var(--gs-cp); }

/* ── 32.4  Zone C — featured tools improvements ─────────── */
.gs-mega-tool-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.gs-mega-tool-logo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gs-tx2);
}
/* "Browse all tools" link at foot of Zone C */
.gs-mega-browse-all {
  display: flex;
  align-items: center;
  gap: .375rem;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--gs-cp-t);
  text-decoration: none;
  padding: .5rem .25rem;
  margin-top: .5rem;
  border-top: 1px solid var(--gs-bd0);
  transition: opacity .15s;
}
.gs-mega-browse-all:hover { opacity: .75; text-decoration: none; }

/* ── 32.5  Mobile drawer — two-panel sliding track ──────── */
.gs-drawer-track {
  display: flex;
  flex: 1;
  min-height: 0;
  /* each screen is 100% wide; track width = 200% so both fit */
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
.gs-drawer-track.is-cats { transform: translateX(-50%); }

/* Each screen exactly fills the drawer width */
.gs-drawer-screen {
  flex: 0 0 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Screen 1 body keeps the existing scrollable drawer-body */
.gs-drawer-screen .gs-drawer-body {
  flex: 1;
  overflow-y: auto;
}

/* ── 32.6  Categories browser header (screen 2 top) ─────── */
.gs-drawer-cats-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .375rem .875rem .375rem .375rem;
  border-bottom: 1px solid var(--gs-bd0);
  flex-shrink: 0;
  font-weight: 600;
  font-size: .9375rem;
  color: var(--gs-tx0);
  min-height: 48px;
}
.gs-drawer-back {
  display: inline-flex;
  align-items: center;
  gap: .3125rem;
  background: none;
  border: none;
  padding: .375rem .625rem;
  border-radius: var(--gs-rmd);
  font-size: .875rem;
  font-weight: 500;
  color: var(--gs-cp-t);
  cursor: pointer;
  font-family: inherit;
  transition: background .12s;
  min-height: 40px;
}
.gs-drawer-back:hover { background: var(--gs-cp-s); }

/* Split pane: left tabs + right subcategory list */
.gs-drawer-cats-wrap {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.gs-drawer-cat-tabs {
  width: 130px;
  flex-shrink: 0;
  border-right: 1px solid var(--gs-bd0);
  overflow-y: auto;
  padding: .375rem 0;
  scrollbar-width: thin;
  scrollbar-color: var(--gs-bd0) transparent;
}
.gs-drawer-cat-tab {
  display: flex;
  align-items: center;
  gap: .4375rem;
  width: 100%;
  padding: .625rem .625rem .625rem .75rem;
  border: none;
  border-left: 2px solid transparent;
  background: none;
  font-family: inherit;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--gs-tx1);
  text-align: left;
  cursor: pointer;
  transition: background .1s, color .1s;
  line-height: 1.3;
}
.gs-drawer-cat-tab:hover { background: var(--gs-bg2); color: var(--gs-tx0); }
.gs-drawer-cat-tab.active {
  background: var(--gs-cp-s);
  color: var(--gs-cp-t);
  border-left-color: var(--gs-cp);
  font-weight: 600;
}
.gs-drawer-cat-tab i { font-size: .8125rem; flex-shrink: 0; width: .875rem; text-align: center; }

/* Sub-category panel column */
.gs-drawer-subcat-wrap {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--gs-bd0) transparent;
}
.gs-drawer-subcat-pane { display: none; padding: .375rem .5rem; }
.gs-drawer-subcat-pane.active { display: block; }
.gs-drawer-subcat-link {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .625rem;
  border-radius: var(--gs-rmd);
  font-size: .8125rem;
  font-weight: 400;
  color: var(--gs-tx1);
  text-decoration: none;
  min-height: 36px;
  transition: background .1s, color .1s;
}
.gs-drawer-subcat-link:hover { background: var(--gs-cp-s); color: var(--gs-cp-t); text-decoration: none; }
/* "View all" link pinned at top */
.gs-drawer-subcat-link-view {
  font-weight: 600;
  color: var(--gs-cp-t);
  border-bottom: 1px solid var(--gs-bd0);
  border-radius: 0;
  padding-bottom: .625rem;
  margin-bottom: .25rem;
  min-height: auto;
}
.gs-drawer-subcat-link-view:hover { background: none; opacity: .8; }
.gs-drawer-subcat-link-view i { color: var(--gs-cp); font-size: .875rem; }

/* ── 32.7  "Browse Categories" trigger button in screen 1 ── */
.gs-drawer-cats-btn {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  padding: .625rem .875rem;
  border-radius: var(--gs-rmd);
  border: none;
  background: none;
  font-family: inherit;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--gs-tx1);
  text-align: left;
  cursor: pointer;
  min-height: 44px;
  transition: background .12s, color .12s;
}
.gs-drawer-cats-btn:hover { background: var(--gs-cp-s); color: var(--gs-cp-t); text-decoration: none; }
.gs-drawer-cats-btn i.gs-drw-icon { color: var(--gs-tx2); font-size: 1rem; width: 1.125rem; text-align: center; flex-shrink: 0; }
.gs-drawer-cats-btn:hover i.gs-drw-icon { color: var(--gs-cp); }
.gs-drawer-cats-btn i.gs-drw-arrow { font-size: .75rem; margin-left: auto; flex-shrink: 0; color: var(--gs-tx2); }
.gs-drawer-cats-btn:hover i.gs-drw-arrow { color: var(--gs-cp); }

/* ── 32.8  Responsive — hide Zone C at medium widths ─────── */
@media (max-width: 1199.98px) {
  .gs-mega-featured { display: none; }
  .gs-mega-subcats  { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1023.98px) {
  /* Tighter Zone A at 1024px breakpoint */
  .gs-mega-cats { width: 12rem; }
}


/* ============================================================
 * § 33 · PHASE 5b — Header & Mega Menu Refinements
 * Fixes: hover, max-width 1100px, Zone-A compactness, navbar
 * shadow, nav-promo styling, mobile drawer slide direction,
 * sticky header shadow, category descriptions.
 * ============================================================ */

/* ── 33.1  Navbar — remove default shadow; clean sticky ─── */
.gs-navbar {
  box-shadow: none;
  border-bottom: 1px solid var(--gs-bd0);
}
/* Subtle shadow appears only after scrolling */
.gs-navbar.scrolled {
  background: rgba(255, 255, 255, 0.97) !important;
  backdrop-filter: blur(14px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.5) !important;
  box-shadow: 0 2px 20px rgba(17, 24, 39, .08) !important;
  border-bottom-color: transparent !important;
}
[data-theme="dark"] .gs-navbar.scrolled {
  background: rgba(9, 9, 11, 0.95) !important;
  box-shadow: 0 2px 20px rgba(0, 0, 0, .35) !important;
}

/* Animated dot indicator */
.gs-topbar::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
    animation: gs-promo-pulse 2s infinite;
}

@keyframes gs-promo-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255,255,255,.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(255,255,255,0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255,255,255,0);
    }
}
.gs-topbar-msg {
  margin: 0;
  font-weight: 500;
  line-height: 1.5;
  margin-left:10px;
}
.gs-topbar-msg strong { font-weight: 700; }
.gs-topbar-close {
  position: absolute;
  right: .75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: .3125rem;
  color: var(--gs-tx2);
  cursor: pointer;
  display: flex;
  align-items: center;
  border-radius: var(--gs-rsm, .375rem);
  font-size: .875rem;
  line-height: 1;
  transition: background .12s, color .12s;
}
.gs-topbar-close:hover { background: var(--gs-bg2); color: var(--gs-tx0); }
.gs-mega-menu.open {
  transform: translateX(-50%) translateY(0);
}

/* ── 33.4  Mega menu — Zone A compact sidebar ───────────── */
.gs-mega-cats-label {
  display: block;
  font-size: .6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--gs-tx2);
  padding: .75rem .875rem .375rem;
}
/* Shrink sidebar + items */
.gs-mega-cats {
  width: 13rem;
  padding-block: .25rem .5rem;
}
.gs-mega-cat-item {
  padding: .4375rem .75rem;
  font-size: .8125rem;
  gap: .5rem;
}
.gs-mega-cat-icon {
  font-size: .9375rem;
  width: 1rem;
  flex-shrink: 0;
  width: 1.25rem;
  color:var(--gs-purple-800)
}
/* "All Categories" footer link */
.gs-mega-cat-all-link { margin-top: .375rem; }

/* ── 33.5  Mega menu — panel description clean rendering ── */
.gs-mega-panel-desc {
  /* Description text is extracted from HTML with strip_tags */
  font-size: .8125rem;
  color: var(--gs-tx2);
  line-height: 1.55;
  margin-top: .375rem;
  margin-bottom: 0;
}

/* ── 33.6  Mobile drawer — correct slide (100% not 50%) ─── */
/* Two screens inside track: each screen = 100% of drawer.
   translateX(-100%) shifts track by its full width = one screen. */
.gs-drawer-track { overflow: visible; }  /* parent drawer clips */
.gs-drawer-track.is-cats { transform: translateX(-100%) !important; }

/* ── 33.7  Responsive mega menu — full-width on < 992px ─── */
/* Mega menu doesn't show on mobile, but ensure 1100px cap */
@media (max-width: 1119.98px) {
  .gs-mega-menu { width: calc(100vw - 1.5rem); }
}

/* Zone A — category sidebar, fills the left edge */
.gs-mega-cats {
  width: 14.5rem;
  background: var(--gs-sf1);
  border-right: 1px solid var(--gs-bd0);
  padding: .875rem .625rem;
  display: flex; flex-direction: column; gap: 1px;
}
.gs-mega-cats-label { padding: .25rem .625rem .5rem; }
.gs-mega-cat-item {
  padding: .5rem .625rem;
  border-radius: 9px;
  border-left: none;               /* drop the old left-bar look */
  font-size: .8125rem;
  color: var(--gs-tx1);
}
.gs-mega-cat-item:hover { background: var(--gs-bg2); color: var(--gs-tx0); }
.gs-mega-cat-item.active {
  background: var(--gs-cp-s);
  color: var(--gs-cp-t);
  font-weight: 600;
  border-left: none;
}
.gs-mega-cat-item.active .gs-mega-cat-arrow { color: var(--gs-cp); }
.gs-mega-cat-arrow { margin-left: auto; font-size: .7rem; opacity: .6; transition: transform .15s; }
.gs-mega-cat-item.active .gs-mega-cat-arrow { opacity: 1; transform: translateX(2px); }
.gs-mega-cat-all-link {
  margin-top: .375rem; padding-top: .625rem;
  border-top: 1px solid var(--gs-bd0);
  color: var(--gs-cp-t); font-weight: 600;
}

/* Zone B — content, comfortable padding */
.gs-mega-content { padding: 1.375rem 1.5rem; }
.gs-mega-panel-hd { margin-bottom: 1rem; padding-bottom: .875rem; border-bottom: 1px solid var(--gs-bd0); }
.gs-mega-panel-badge { font-size: .9375rem; font-weight: 700; color: var(--gs-tx0); display: inline-flex; align-items: center; gap: .4rem; }
.gs-mega-panel-badge i { color: var(--gs-cp); }
.gs-mega-panel-count { font-size: .75rem; color: var(--gs-tx2); margin-left: .625rem; }
.gs-mega-panel-link { margin-left: auto; font-size: .8125rem; font-weight: 600; color: var(--gs-cp-t); }
.gs-mega-panel-desc { margin: .5rem 0 0; }

/* 3-column subcategory grid — clean rows with rounded hover */
.gs-mega-subcat-link:hover { background: var(--gs-cp-s); color: var(--gs-cp-t); }
.gs-mega-subcat-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gs-bd2, #cbd5e1); flex-shrink: 0; transition: background .15s; }
.gs-mega-subcat-link:hover .gs-mega-subcat-dot { background: var(--gs-cp); }

/* Zone C — featured, fills the right edge */
.gs-mega-featured {
  width: 17rem;
  background: var(--gs-sf1);
  border-left: 1px solid var(--gs-bd0);
  padding: 1.375rem 1.125rem;
}
.gs-mega-tool-item { border-radius: 9px; }
.gs-mega-tool-item:hover { background: var(--gs-bg2); }
.gs-mega-browse-all {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: .75rem; padding: .5rem .25rem;
  font-size: .8125rem; font-weight: 600; color: var(--gs-cp-t); text-decoration: none;
}
.gs-mega-browse-all:hover { text-decoration: underline; }

/* ── Sticky header (ALL screens, incl. mobile) ──
   <header> wraps only the bar, so position:sticky on .gs-navbar un-sticks once
   the short header scrolls out of view. display:contents removes the header box
   so the navbar's sticky containing block becomes <body> (full page) → it pins.
   The mobile drawer/backdrop are position:fixed, so they're unaffected. */
header { display: contents; }

/* Smooth sticky navbar — refined scrolled state */
.gs-navbar { transition: box-shadow .25s ease, background .25s ease, border-color .25s ease; }
.gs-navbar.scrolled {
  background: var(--gs-sf0);
  box-shadow: 0 4px 22px -6px rgba(17, 24, 39, .12);
  border-bottom-color: transparent;
}
[data-theme="dark"] .gs-navbar.scrolled { background: var(--gs-sf0); box-shadow: 0 4px 22px -6px rgba(0,0,0,.45); }

/* ============================================================
 * Dashboard sidebar fixes — collapse button visibility + mobile drawer
 * ============================================================ */
.gs-sb-foot-actions { display: flex; align-items: center; gap: .5rem; }
.gs-sb-foot-actions .gs-sb-footer-link { flex: 1; }
/* clearer collapse button (it now lives in the footer, next to Log Out) */
.gs-sb-collapse-btn { width: 2rem; height: 2rem; border: 1px solid var(--gs-border-default); }
/* when collapsed: stack the footer actions so the collapse button is fully visible + centered */
.gs-sidebar.collapsed .gs-sb-foot-actions { flex-direction: column; gap: .45rem; }
.gs-sidebar.collapsed .gs-sb-foot-actions .gs-sb-footer-link { flex: none; width: 100%; justify-content: center; }
.gs-sidebar.collapsed .gs-sb-collapse-btn { width: 2.25rem; height: 2.25rem; margin: 0 auto; color: var(--gs-cp); border-color: var(--gs-cp); }

/* Mobile: the drawer is always full-width — never apply the desktop "collapsed"
   (icon-only) look, which otherwise leaves a big empty gap where labels would be. */
@media (max-width: 991.98px) {
  .gs-sidebar.collapsed .gs-collapsed-hide,
  .gs-sidebar.collapsed .gs-sb-label { opacity: 1; max-width: 12rem; pointer-events: auto; }
  .gs-sidebar.collapsed .gs-sb-badge { opacity: 1; pointer-events: auto; }
  .gs-sidebar.collapsed .gs-sb-foot-actions { flex-direction: row; }
  .gs-sidebar.collapsed .gs-sb-foot-actions .gs-sb-footer-link { flex: 1; width: auto; justify-content: flex-start; }
}

/* Dashboard sidebar — clearer ACTIVE link highlight (current page) */
.gs-sb-link.active,
.gs-sb-link[aria-current="page"] {
  background: var(--gs-cp-s);
  color: var(--gs-cp-t, var(--gs-cp));
  border-left-color: var(--gs-cp);
  font-weight: 700;
}
.gs-sb-link.active .gs-sb-icon,
.gs-sb-link.active .gs-sb-icon i,
.gs-sb-link[aria-current="page"] .gs-sb-icon,
.gs-sb-link[aria-current="page"] .gs-sb-icon i { color: var(--gs-cp); }


/* ════════════════════════════════════════════════════════════════
   REVIEWS PAGE (/reviews) — ported from html_themes/reviews.html
   ════════════════════════════════════════════════════════════════ */
:root{--gs-orange-400:#FB923C;--gs-orange-600:#EA580C;--gs-green-200:#BBF7D0;--gs-ct-s:#EFF6FF;--gs-sf1:var(--gs-sf0)}
/* ── Page hero ───────────────────────────────────────────── */
.rv-hero{background:var(--gs-bg0);border-bottom:1px solid var(--gs-bd0);padding:2rem 0 0}
.rv-hero-band{display:flex;align-items:flex-start;gap:1.25rem;flex-wrap:wrap;padding-bottom:1.75rem}
.rv-tool-logo{width:68px;height:68px;border-radius:var(--gs-rlg);background:var(--gs-bg2);border:1px solid var(--gs-bd1);display:flex;align-items:center;justify-content:center;font-size:2.125rem;flex-shrink:0;box-shadow:var(--gs-shsm);overflow:hidden}
.rv-hero-text{flex:1;min-width:0}
.rv-back-link{display:inline-flex;align-items:center;gap:.3rem;font-size:.8125rem;color:var(--gs-tx2);font-weight:500;margin-bottom:.375rem;text-decoration:none;transition:color .15s}
.rv-back-link:hover{color:var(--gs-cp)}
.rv-hero-h1{font-size:clamp(1.5rem,3.5vw,2.25rem);font-weight:800;letter-spacing:-.035em;line-height:1.15;color:var(--gs-tx0);margin-bottom:.75rem}
.rv-hero-meta{display:flex;align-items:center;flex-wrap:wrap;gap:1rem;font-size:.875rem;color:var(--gs-tx2)}
.rv-score-inline{display:flex;align-items:baseline;gap:.2rem;font-family:var(--gs-fd)}
.rv-score-inline .n{font-size:2rem;font-weight:800;letter-spacing:-.04em;color:var(--gs-tx0);line-height:1}
.rv-score-inline .d{font-size:.875rem;color:var(--gs-tx2)}
.rv-stars-sm{display:flex;gap:1px}
.rv-stars-sm i{color:var(--gs-orange-500);font-size:.9375rem}
.rv-meta-sep{width:1px;height:1rem;background:var(--gs-bd1);flex-shrink:0}
.rv-hero-actions{display:flex;flex-wrap:wrap;gap:.625rem;padding:1.125rem 0;border-top:1px solid var(--gs-bd0);margin-top:1rem}

/* ── Two-col layout ─────────────────────────────────────── */
.rv-body-wrap{padding:2rem 0 4rem}
.rv-two-col{display:grid;grid-template-columns:1fr 348px;gap:2rem;align-items:start}
@media(max-width:991.98px){.rv-two-col{grid-template-columns:1fr}}

/* ── Content panels (rounded card) ─────────────────────── */
.rv-panel{background:var(--gs-sf1);border:1px solid var(--gs-bd1);border-radius:var(--gs-r2xl);padding:1.75rem;margin-bottom:1.5rem}
.rv-panel:last-child{margin-bottom:0}
.rv-panel-title{font-family:var(--gs-fd);font-size:1.125rem;font-weight:800;letter-spacing:-.025em;color:var(--gs-tx0);margin-bottom:1.25rem;display:flex;align-items:center;gap:.5rem}
.rv-panel-title i{font-size:1rem;color:var(--gs-cp)}

/* ── Rating snapshot ─────────────────────────────────────── */
.rv-snapshot{display:grid;grid-template-columns:auto 1fr auto;gap:2rem;align-items:start}
@media(max-width:767.98px){.rv-snapshot{grid-template-columns:1fr 1fr;gap:1.25rem}}
@media(max-width:479px){.rv-snapshot{grid-template-columns:1fr}}
.rv-big-num{text-align:center}
.rv-big-num .score{font-family:var(--gs-fd);font-size:4rem;font-weight:800;letter-spacing:-.06em;line-height:1;color:var(--gs-tx0)}
.rv-big-num .stars{display:flex;gap:3px;justify-content:center;margin:.25rem 0}
.rv-big-num .stars i{color:var(--gs-orange-500);font-size:1.125rem}
.rv-big-num .label{font-size:.8125rem;color:var(--gs-tx2)}
.rv-big-num .recommend{font-size:.8125rem;font-weight:600;color:var(--gs-cs);margin-top:.25rem}
/* Bar chart */
.rv-bars{display:flex;flex-direction:column;gap:.4375rem}
.rv-bar-row{display:flex;align-items:center;gap:.625rem;cursor:pointer;padding:.125rem .25rem;border-radius:var(--gs-rsm);transition:background .12s}
.rv-bar-row:hover,.rv-bar-row.active{background:rgba(91,33,182,.06)}
[data-theme="dark"] .rv-bar-row:hover,[data-theme="dark"] .rv-bar-row.active{background:rgba(167,139,250,.08)}
.rv-bar-row:focus-visible{outline:none;box-shadow:var(--gs-foc);border-radius:var(--gs-rsm)}
.rv-bar-lbl{width:32px;font-size:.75rem;font-weight:600;color:var(--gs-tx2);text-align:right;flex-shrink:0;white-space:nowrap}
.rv-bar-lbl i{color:var(--gs-orange-500);font-size:.625rem;margin-left:1px}
.rv-bar-track{flex:1;height:8px;background:var(--gs-bg2);border-radius:var(--gs-rf);overflow:hidden;min-width:60px}
.rv-bar-fill{height:100%;border-radius:var(--gs-rf);background:var(--gs-orange-500);transition:width .6s cubic-bezier(.34,1.56,.64,1)}
.rv-bar-count{width:36px;font-size:.75rem;font-weight:500;color:var(--gs-tx2);flex-shrink:0}
.rv-bar-pct{width:28px;font-size:.75rem;color:var(--gs-tx2);flex-shrink:0;text-align:right}
/* Dimension mini-scores */
.rv-dims{display:flex;flex-direction:column;gap:.625rem;min-width:180px}
@media(max-width:767.98px){.rv-dims{grid-column:1 / -1}}
.rv-dim-head{font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--gs-tx2);margin-bottom:.375rem}
.rv-dim-row{display:flex;align-items:center;gap:.625rem;font-size:.8125rem}
.rv-dim-name{color:var(--gs-tx2);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv-dim-bar{flex:0 0 80px;height:6px;background:var(--gs-bg2);border-radius:var(--gs-rf);overflow:hidden}
.rv-dim-fill{height:100%;border-radius:var(--gs-rf);background:linear-gradient(90deg,var(--gs-cp),var(--gs-purple-400));transition:width .6s .1s cubic-bezier(.34,1.56,.64,1)}
.rv-dim-val{font-family:var(--gs-fd);font-size:.8125rem;font-weight:700;color:var(--gs-tx0);min-width:24px;text-align:right;flex-shrink:0}

/* ── Sentiment tag clouds ───────────────────────────────── */
.rv-sent-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:575.98px){.rv-sent-grid{grid-template-columns:1fr}}
.rv-sent-block{background:var(--gs-bg1);border:1px solid var(--gs-bd0);border-radius:var(--gs-rxl);padding:1.125rem}
.rv-sent-head{display:flex;align-items:center;gap:.4rem;font-family:var(--gs-fd);font-size:.875rem;font-weight:700;margin-bottom:.75rem}
.rv-sent-head.pos{color:var(--gs-cs)}
.rv-sent-head.neg{color:var(--gs-orange-600)}
[data-theme="dark"] .rv-sent-head.neg{color:var(--gs-orange-400)}
.rv-sent-tags{display:flex;flex-wrap:wrap;gap:.375rem}
.rv-tag{display:inline-flex;align-items:center;gap:.25rem;font-size:.8125rem;font-weight:500;padding:.3125rem .75rem;border-radius:var(--gs-rf);cursor:pointer;border:1px solid transparent;transition:background .12s,border-color .12s,color .12s,transform .1s}
.rv-tag:active{transform:scale(.97)}
.rv-tag:focus-visible{outline:none;box-shadow:var(--gs-foc)}
.rv-tag.pos{background:var(--gs-cs-s);border-color:rgba(61,139,55,.2);color:var(--gs-cs)}
.rv-tag.pos:hover{background:var(--gs-green-100);border-color:rgba(61,139,55,.35)}
[data-theme="dark"] .rv-tag.pos{background:rgba(61,139,55,.12);border-color:rgba(74,222,128,.2);color:#4ADE80}
.rv-tag.neg{background:#FFF7ED;border-color:#FED7AA;color:#C2410C}
.rv-tag.neg:hover{background:#FFEDD5;border-color:#FDBA74}
[data-theme="dark"] .rv-tag.neg{background:rgba(194,65,12,.12);border-color:rgba(251,146,60,.25);color:var(--gs-orange-400)}
.rv-tag .cnt{font-size:.6875rem;opacity:.65}

/* ── Filter bar ─────────────────────────────────────────── */
.rv-filters{background:var(--gs-sf1);border:1px solid var(--gs-bd1);border-radius:var(--gs-r2xl);padding:1.125rem 1.375rem;margin-bottom:1.5rem;display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}
.rv-filter-lbl{font-size:.8125rem;font-weight:600;color:var(--gs-tx2);flex-shrink:0}
.rv-chip{display:inline-flex;align-items:center;gap:.25rem;padding:.3125rem .75rem;border-radius:var(--gs-rf);font-family:var(--gs-fd);font-size:.8125rem;font-weight:500;color:var(--gs-tx2);background:var(--gs-sf2);border:1px solid var(--gs-bd1);cursor:pointer;transition:all .12s;white-space:nowrap}
.rv-chip:hover{border-color:var(--gs-cp-b);color:var(--gs-cp-t);background:var(--gs-cp-s)}
.rv-chip.active{background:var(--gs-cp);color:var(--gs-cp-fg,#fff);border-color:var(--gs-cp)}
.rv-chip:focus-visible{outline:none;box-shadow:var(--gs-foc)}
.rv-filter-sep{width:1px;height:1.25rem;background:var(--gs-bd1);flex-shrink:0}
.rv-sort-wrap{margin-left:auto;display:flex;align-items:center;gap:.5rem;flex-shrink:0}
.rv-sort-lbl{font-size:.8125rem;color:var(--gs-tx2)}
.rv-sort-sel{height:36px;padding:0 2rem 0 .75rem;font-size:.8125rem;color:var(--gs-tx0);background:var(--gs-sf0);border:1.5px solid var(--gs-bd1);border-radius:var(--gs-rlg);cursor:pointer;outline:none;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 16 10'%3E%3Cpath fill='none' stroke='%236B7280' stroke-width='1.5' d='M2 2l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .6rem center;transition:border-color .15s}
.rv-sort-sel:focus{border-color:var(--gs-cp);box-shadow:var(--gs-foc)}
[data-theme="dark"] .rv-sort-sel{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 16 10'%3E%3Cpath fill='none' stroke='%23B4BAD0' stroke-width='1.5' d='M2 2l6 6 6-6'/%3E%3C/svg%3E")}
/* ── List header ─────────────────────────────────────────── */
.rv-list-hd{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;margin-bottom:1.25rem}
.rv-list-count{font-size:.9375rem;font-weight:600;color:var(--gs-tx0)}
.rv-list-count span{font-weight:400;color:var(--gs-tx2)}

/* ── Featured review ─────────────────────────────────────── */
.rv-featured{background:linear-gradient(135deg,var(--gs-cp-s) 0%,var(--gs-cs-s) 100%);border:1.5px solid var(--gs-cp-b);border-radius:var(--gs-r2xl);padding:1.625rem;margin-bottom:1rem;position:relative;overflow:hidden}
.rv-featured::after{content:'';position:absolute;top:-50px;right:-50px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(91,33,182,.07),transparent 70%);pointer-events:none}
[data-theme="dark"] .rv-featured{background:linear-gradient(135deg,rgba(109,40,217,.12) 0%,rgba(61,139,55,.08) 100%);border-color:var(--gs-cp-b)}
.rv-featured-eyebrow{font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--gs-cp-t);margin-bottom:.875rem;display:flex;align-items:center;gap:.375rem}

/* ── Review card ─────────────────────────────────────────── */
.rv-card{background:var(--gs-sf1);border:1px solid var(--gs-bd1);border-radius:var(--gs-r2xl);padding:1.5rem;margin-bottom:1rem;transition:box-shadow .2s,border-color .2s}
.rv-card:hover{box-shadow:var(--gs-shlg);border-color:var(--gs-bd2)}
.rv-card:last-of-type{margin-bottom:0}
/* Head row */
.rv-card-head{display:flex;align-items:flex-start;gap:.875rem;margin-bottom:1rem}
.rv-avatar{width:42px;height:42px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--gs-fd);font-size:.875rem;font-weight:700;color:#fff}
.rv-meta{flex:1;min-width:0}
.rv-name{font-family:var(--gs-fd);font-size:.9375rem;font-weight:700;color:var(--gs-tx0);margin-bottom:.1875rem}
.rv-details{display:flex;align-items:center;gap:.4375rem;flex-wrap:wrap;font-size:.75rem;color:var(--gs-tx2)}
.rv-role{color:var(--gs-tx1)}
.rv-verified{display:inline-flex;align-items:center;gap:.2rem;background:var(--gs-cs-s);color:var(--gs-cs);border:1px solid rgba(61,139,55,.2);border-radius:var(--gs-rf);padding:1px 6px;font-size:.5625rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
[data-theme="dark"] .rv-verified{background:rgba(61,139,55,.12);border-color:rgba(74,222,128,.25);color:#4ADE80}
.rv-card-stars{display:flex;gap:1px;flex-shrink:0;margin-left:auto}
.rv-card-stars i{color:var(--gs-orange-500);font-size:.9375rem}
.rv-card-stars i.off{color:var(--gs-bd2)}
/* Recommend pill */
.rv-recommend{display:inline-flex;align-items:center;gap:.3rem;font-size:.75rem;font-weight:600;padding:.25rem .625rem;border-radius:var(--gs-rf);margin-bottom:.875rem}
.rv-recommend.yes{background:var(--gs-cs-s);color:var(--gs-cs);border:1px solid rgba(61,139,55,.2)}
.rv-recommend.no{background:#FFF7ED;color:#C2410C;border:1px solid #FECACA}
[data-theme="dark"] .rv-recommend.yes{background:rgba(61,139,55,.12);border-color:rgba(74,222,128,.25);color:#4ADE80}
[data-theme="dark"] .rv-recommend.no{background:rgba(194,65,12,.12);border-color:rgba(251,146,60,.28);color:var(--gs-orange-400)}
/* Headline + body */
.rv-headline{font-family:var(--gs-fd);font-size:1rem;font-weight:700;color:var(--gs-tx0);margin-bottom:.625rem;line-height:1.35}
.rv-body{font-size:.9375rem;color:var(--gs-tx1);line-height:1.7;margin-bottom:.875rem;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.rv-body.expanded{display:block}
/* Dimension sub-scores */
.rv-card-dims{display:flex;flex-wrap:wrap;gap:.625rem;padding:.875rem;background:var(--gs-bg1);border-radius:var(--gs-rlg);margin-bottom:.875rem}
.rv-cdim{display:flex;align-items:center;gap:.375rem;font-size:.75rem}
.rv-cdim-lbl{color:var(--gs-tx2)}
.rv-cdim-stars{display:flex;gap:1px}
.rv-cdim-stars i{color:var(--gs-orange-500);font-size:.625rem}
.rv-cdim-stars i.off{color:var(--gs-bd2)}
.rv-cdim-val{font-family:var(--gs-fd);font-weight:700;color:var(--gs-tx0)}
/* Usage note */
.rv-usage{font-size:.75rem;color:var(--gs-tx2);margin-bottom:.875rem;display:flex;align-items:center;gap:.375rem;flex-wrap:wrap}
.rv-usage i{font-size:.75rem}
/* Actions row */
.rv-actions{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;padding-top:.875rem;border-top:1px solid var(--gs-bd0)}
.rv-act{display:inline-flex;align-items:center;gap:.3rem;font-size:.75rem;font-weight:500;color:var(--gs-tx2);background:none;border:1px solid var(--gs-bd1);border-radius:var(--gs-rf);padding:.3125rem .75rem;cursor:pointer;transition:background .12s,color .12s,border-color .12s}
.rv-act:hover{background:var(--gs-bg2);color:var(--gs-tx0);border-color:var(--gs-bd2)}
.rv-act.helpful.voted{background:var(--gs-cp-s);color:var(--gs-cp-t);border-color:var(--gs-cp-b)}
.rv-act:focus-visible{outline:none;box-shadow:var(--gs-foc)}
/* Vendor reply */
.rv-vreply{background:var(--gs-bg1);border-left:3px solid var(--gs-ct);border-radius:0 var(--gs-rmd) var(--gs-rmd) 0;padding:.875rem 1rem;margin-top:.875rem}
.rv-vreply-head{font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--gs-ct);margin-bottom:.375rem;display:flex;align-items:center;gap:.375rem}
.rv-vreply-body{font-size:.875rem;color:var(--gs-tx1);line-height:1.65}

/* ── Write review CTA card ───────────────────────────────── */
.rv-write-cta{background:var(--gs-sf1);border:1.5px dashed var(--gs-bd2);border-radius:var(--gs-r2xl);padding:2rem 1.75rem;text-align:center;margin-top:1rem;transition:border-color .15s,background .15s}
.rv-write-cta:hover{border-color:var(--gs-cp-b);background:var(--gs-cp-s)}
/* Star picker inside CTA */
.rv-star-pick{display:flex;justify-content:center;gap:.25rem;margin:.875rem 0}
.rv-sp-star{background:none;border:none;cursor:pointer;color:var(--gs-bd2);font-size:2rem;transition:color .12s,transform .1s;padding:.125rem;line-height:1}
.rv-sp-star:hover,.rv-sp-star.on{color:var(--gs-orange-500);transform:scale(1.1)}
.rv-sp-star:focus-visible{outline:none;box-shadow:var(--gs-foc);border-radius:50%}

/* ── Write review modal ─────────────────────────────────── */
.rv-modal-back{position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;padding:1rem;opacity:0;pointer-events:none;transition:opacity .2s}
.rv-modal-back.open{opacity:1;pointer-events:auto}
.rv-modal-overlay{position:absolute;inset:0;background:rgba(9,10,16,.65);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.rv-modal-box{position:relative;z-index:1;background:var(--gs-sf0);border:1px solid var(--gs-bd0);border-radius:var(--gs-r2xl);box-shadow:0 20px 60px rgba(0,0,0,.22);width:min(calc(100vw - 2rem),600px);max-height:calc(100dvh - 2rem);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--gs-bd0) transparent;transform:translateY(10px);transition:transform .22s}
.rv-modal-back.open .rv-modal-box{transform:translateY(0)}
.rv-mhd{position:sticky;top:0;background:var(--gs-sf0);z-index:1;display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:1.25rem 1.5rem;border-bottom:1px solid var(--gs-bd0)}
.rv-mhd-title{font-family:var(--gs-fd);font-size:1.0625rem;font-weight:700;color:var(--gs-tx0)}
.rv-mbody{padding:1.5rem}
.rv-mft{position:sticky;bottom:0;background:var(--gs-sf0);padding:1rem 1.5rem;border-top:1px solid var(--gs-bd0);display:flex;justify-content:flex-end;gap:.625rem}
.rv-field{margin-bottom:1.125rem}
.gs-lbl{display:block;font-family:var(--gs-fd);font-size:.875rem;font-weight:600;color:var(--gs-tx0);margin-bottom:.375rem}
.gs-inp,.gs-txa,.gs-sel{width:100%;font-family:var(--gs-fb);font-size:.9375rem;color:var(--gs-tx0);background:var(--gs-sf0);border:1.5px solid var(--gs-bd1);border-radius:var(--gs-rmd);outline:none;-webkit-appearance:none;appearance:none;transition:border-color .15s,box-shadow .15s}
.gs-inp{height:48px;padding:0 .875rem}
.gs-txa{padding:.6875rem .875rem;resize:vertical;min-height:110px;line-height:1.65}
.gs-sel{height:48px;padding:0 2.5rem 0 .875rem;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 16 10'%3E%3Cpath fill='none' stroke='%236B7280' stroke-width='1.5' d='M2 2l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .875rem center}
[data-theme="dark"] .gs-sel{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 16 10'%3E%3Cpath fill='none' stroke='%23B4BAD0' stroke-width='1.5' d='M2 2l6 6 6-6'/%3E%3C/svg%3E")}
.gs-inp::placeholder,.gs-txa::placeholder{color:var(--gs-tx2)}
.gs-inp:focus,.gs-txa:focus,.gs-sel:focus{border-color:var(--gs-cp);box-shadow:0 0 0 1px var(--gs-sf0),0 0 0 4px rgba(91,33,182,.20)}
/* Modal star picker */
.rv-mstars{display:flex;gap:.375rem;margin-bottom:.25rem}
.rv-ms{background:none;border:none;cursor:pointer;font-size:2.125rem;color:var(--gs-bd2);transition:color .1s,transform .1s;padding:.125rem;line-height:1}
.rv-ms.on{color:var(--gs-orange-500)}
.rv-ms:hover{color:var(--gs-orange-400);transform:scale(1.08)}
.rv-ms:focus-visible{outline:none;box-shadow:var(--gs-foc);border-radius:4px}
/* Dimension sliders in modal */
.rv-mdim{display:flex;align-items:center;gap:.75rem;margin-bottom:.625rem;font-size:.875rem}
.rv-mdim label{min-width:110px;color:var(--gs-tx1);font-weight:500;flex-shrink:0}
.rv-mdim-sl{flex:1;height:6px;-webkit-appearance:none;appearance:none;background:var(--gs-bg2);border-radius:var(--gs-rf);outline:none;cursor:pointer}
.rv-mdim-sl::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--gs-cp);box-shadow:0 2px 6px rgba(91,33,182,.3);cursor:pointer}
.rv-mdim-sl:focus-visible{box-shadow:var(--gs-foc)}
.rv-mdim-val{min-width:24px;font-family:var(--gs-fd);font-weight:700;font-size:.875rem;color:var(--gs-tx0);text-align:right;flex-shrink:0}

/* ── Pagination ──────────────────────────────────────────── */
.rv-pagination{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.375rem;margin-top:2rem}
.rv-pg{min-width:40px;height:40px;display:flex;align-items:center;justify-content:center;padding:0 .5rem;font-family:var(--gs-fd);font-size:.875rem;font-weight:500;color:var(--gs-tx1);background:var(--gs-sf1);border:1px solid var(--gs-bd1);border-radius:var(--gs-rmd);cursor:pointer;transition:all .12s;text-decoration:none;user-select:none}
.rv-pg:hover{background:var(--gs-bg2);color:var(--gs-tx0);text-decoration:none}
.rv-pg.active{background:var(--gs-cp);color:var(--gs-cp-fg,#fff);border-color:var(--gs-cp)}
.rv-pg:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
.rv-pg:focus-visible{outline:none;box-shadow:var(--gs-foc)}
.rv-pg-dots{display:flex;align-items:center;height:40px;padding:0 .25rem;color:var(--gs-tx2);pointer-events:none}

/* ── Sidebar ─────────────────────────────────────────────── */
.rv-sidebar-inner{position:sticky;top:calc(var(--gs-nh) + 1.25rem);display:flex;flex-direction:column;gap:1.25rem}
@media(max-width:991.98px){.rv-sidebar-inner{position:static}}
.rv-sb-card{background:var(--gs-sf1);border:1px solid var(--gs-bd1);border-radius:var(--gs-r2xl);padding:1.5rem}
.rv-sb-logo{width:52px;height:52px;border-radius:var(--gs-rlg);background:var(--gs-bg2);border:1px solid var(--gs-bd1);display:flex;align-items:center;justify-content:center;font-size:1.625rem;margin-bottom:.875rem;overflow:hidden}
.rv-sb-name{font-family:var(--gs-fd);font-size:1.0625rem;font-weight:800;color:var(--gs-tx0);margin-bottom:.25rem;letter-spacing:-.02em}
.rv-sb-tag{font-size:.875rem;color:var(--gs-tx2);line-height:1.5;margin-bottom:1rem}
.rv-sb-score-row{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}
.rv-sb-score-row .stars i{color:var(--gs-orange-500);font-size:.875rem}
.rv-sb-score-row .sc{font-family:var(--gs-fd);font-weight:700;color:var(--gs-tx0)}
.rv-sb-score-row .ct{font-size:.8125rem;color:var(--gs-tx2)}
.rv-sb-price{display:flex;align-items:baseline;gap:.375rem;margin-bottom:1rem}
.rv-sb-price .fr{font-family:var(--gs-fd);font-size:1.0625rem;font-weight:700;color:var(--gs-cs)}
.rv-sb-price .pd{font-size:.875rem;color:var(--gs-tx2)}
.rv-sb-facts{display:flex;flex-direction:column;gap:.4375rem;border-top:1px solid var(--gs-bd0);padding-top:1rem;margin:1rem 0}
.rv-sb-fact{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;color:var(--gs-tx1)}
.rv-sb-fact i{font-size:.875rem;color:var(--gs-cs);flex-shrink:0}
.rv-sb-affi{font-size:.6875rem;color:var(--gs-tx2);line-height:1.5;text-align:center;margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--gs-bd0)}
.rv-sb-affi a{color:var(--gs-tx2);text-decoration:underline;text-underline-offset:2px}
/* Stats list */
.rv-sb-stats{display:flex;flex-direction:column;gap:.5rem}
.rv-sb-stat{display:flex;align-items:center;justify-content:space-between;font-size:.8125rem}
.rv-sb-stat .lbl{color:var(--gs-tx2)}
.rv-sb-stat .val{font-weight:600;color:var(--gs-tx0)}
/* Segments chart */
.rv-sb-segs{display:flex;flex-direction:column;gap:.5rem}
.rv-sb-seg-row{font-size:.8125rem}
.rv-sb-seg-lbl{display:flex;justify-content:space-between;margin-bottom:.25rem}
.rv-sb-seg-lbl span:first-child{color:var(--gs-tx2)}
.rv-sb-seg-lbl span:last-child{font-weight:600;color:var(--gs-tx0)}
.rv-sb-seg-bar{height:5px;background:var(--gs-bg2);border-radius:var(--gs-rf);overflow:hidden}
.rv-sb-seg-fill{height:100%;border-radius:var(--gs-rf);background:var(--gs-cp)}
/* Alternatives in sidebar */
.rv-sb-alt{display:flex;align-items:center;gap:.625rem;padding:.5rem;border-radius:var(--gs-rmd);text-decoration:none;transition:background .12s}
.rv-sb-alt:hover{background:var(--gs-bg2);text-decoration:none}
.rv-sb-alt-logo{width:32px;height:32px;border-radius:var(--gs-rmd);background:var(--gs-bg2);border:1px solid var(--gs-bd0);display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}
.rv-sb-alt-name{font-family:var(--gs-fd);font-size:.875rem;font-weight:600;color:var(--gs-tx0)}
.rv-sb-alt-cat{font-size:.6875rem;color:var(--gs-tx2)}
.rv-sb-alt-score{display:flex;align-items:center;gap:.2rem;font-size:.75rem;color:var(--gs-tx2);margin-left:auto;flex-shrink:0}
.rv-sb-alt-score i{color:var(--gs-orange-500);font-size:.6875rem}
.rv-sb-alt-score strong{color:var(--gs-tx0)}

/* ── Responsive overrides ────────────────────────────────── */
@media(max-width:767.98px){
  .rv-body-wrap{padding:1.5rem 0 3rem}
  .rv-panel{padding:1.25rem}
  .rv-card{padding:1.25rem}
  .rv-filters{padding:.875rem 1rem;gap:.5rem}
  .rv-card-dims{display:none}
}
@media(max-width:575.98px){
  .rv-mhd{padding:1rem 1.25rem}
  .rv-mbody{padding:1.125rem}
  .rv-mft{padding:.875rem 1.25rem}
  .rv-mdim label{min-width:80px}
}

/* Reviews sidebar: stretch the aside so .rv-sidebar-inner can stick while scrolling */
.rv-two-col > aside{align-self:stretch}
@media(max-width:991.98px){.rv-two-col > aside{align-self:auto}}

/* ============================================================ UX-05 EMPTY STATES */
.gs-empty{text-align:center;padding:3rem 1.5rem;max-width:440px;margin:1rem auto}
.gs-empty-icon{width:72px;height:72px;border-radius:50%;background:var(--gs-cp-s,#f5f3ff);color:var(--gs-cp,#5b21b6);display:flex;align-items:center;justify-content:center;font-size:2rem;margin:0 auto 1rem}
.gs-empty-title{font-size:1.15rem;font-weight:700;margin:0 0 .35rem;color:var(--gs-tx1,#1e293b)}
.gs-empty-text{color:var(--gs-tx2,#64748b);font-size:.9rem;margin:0 0 1.1rem}
.gs-empty-cta{display:inline-flex;align-items:center;gap:.4rem}
.gs-empty-help{margin-top:1.2rem;font-size:.8rem;color:var(--gs-tx2,#94a3b8);background:var(--gs-surface-1,#f8fafc);border-radius:.5rem;padding:.55rem .8rem;display:inline-flex;align-items:center;gap:.4rem}
@media(max-width:575.98px){.gs-empty{padding:2rem 1rem}.gs-empty-icon{width:60px;height:60px;font-size:1.6rem}}

/* ============================================================
 * DASHBOARD-UX-02 — full-height BRAND sidebar on the LEFT
 * Full-height left rail pulled to the very top, painted with the workspace
 * brand colour (--gs-rail-bg) + readable foreground (--gs-rail-fg, set
 * per-request in dashboard/layout.php). Scoped to .gs-dash-shell so the
 * public site navbar is untouched.
 * ============================================================ */
.gs-dash-shell .gs-sidebar{
  background:var(--gs-rail-bg,#5B21B6);
  color:var(--gs-rail-fg,#fff);
  border-left:0;
}
@media (min-width:992px){
  /* full-height fixed left rail */
  .gs-dash-shell .gs-sidebar{
    position:fixed; top:0; left:0; bottom:0; right:auto;
    height:100vh; width:var(--gs-sidebar-width);
    border-right:1px solid rgba(255,255,255,.14);
    box-shadow:8px 0 28px rgba(2,6,23,.12);
    z-index:999;
  }
  .gs-dash-shell .gs-sidebar.collapsed{ width:var(--gs-sidebar-collapsed); }
  /* keep the topbar + page content to the RIGHT of the rail */
  .gs-dash-shell .gs-navbar{ padding-left:calc(var(--gs-sidebar-width) + 1.25rem); }
  .gs-dash-shell .gs-dash-layout{ margin-left:var(--gs-sidebar-width); min-height:100vh; }
  .gs-dash-shell:has(.gs-sidebar.collapsed) .gs-navbar{ padding-left:calc(var(--gs-sidebar-collapsed) + 1.25rem); }
  .gs-dash-shell:has(.gs-sidebar.collapsed) .gs-dash-layout{ margin-left:var(--gs-sidebar-collapsed); }
  /* Collapsed rail: hide shortcut-key badges (icons only) + show the label as a FIXED tooltip
     (positioned by JS) so it isn't clipped by the rail's overflow / hidden behind the page. */
  .gs-dash-shell .gs-sidebar.collapsed .gs-sb-kbd{ display:none !important; }
  .gs-dash-shell .gs-sidebar.collapsed .gs-sb-tooltip{ position:fixed; left:auto; right:auto; transform:translateY(-50%); z-index:3000; }
  .gs-dash-shell .gs-sidebar.collapsed .gs-sb-tooltip::before{ left:-4px; right:auto; }
}
/* ---- brand-on-rail recolouring (all breakpoints) ---- */
.gs-dash-shell .gs-sidebar .gs-sb-search{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.22); color:var(--gs-rail-fg,#fff); }
.gs-dash-shell .gs-sidebar .gs-sb-search::placeholder{ color:color-mix(in srgb,var(--gs-rail-fg,#fff) 60%,transparent); }
.gs-dash-shell .gs-sidebar .gs-sb-search:focus{ border-color:rgba(255,255,255,.5); }
.gs-dash-shell .gs-sidebar .gs-sb-search-wrap>.bi-search{ color:color-mix(in srgb,var(--gs-rail-fg,#fff) 70%,transparent); }
.gs-dash-shell .gs-sidebar .gs-sb-search-x{ color:color-mix(in srgb,var(--gs-rail-fg,#fff) 70%,transparent); }
.gs-dash-shell .gs-sidebar .gs-sb-group-hd{ color:color-mix(in srgb,var(--gs-rail-fg,#fff) 70%,transparent); }
.gs-dash-shell .gs-sidebar .gs-sb-group-hd:hover{ color:var(--gs-rail-fg,#fff); }
.gs-dash-shell .gs-sidebar .gs-sb-group+.gs-sb-group>.gs-sb-group-hd{ border-top-color:rgba(255,255,255,.13); }
.gs-dash-shell .gs-sidebar .gs-active-section>.gs-sb-group-hd,
.gs-dash-shell .gs-sidebar .gs-active-section>.gs-sb-group-hd .gs-sb-chev{ color:var(--gs-rail-fg,#fff); }
/* Sub-items sit a little darker/softer than the pure-white parent headers (clear hierarchy). */
.gs-dash-shell .gs-sidebar .gs-sb-link{ color:color-mix(in srgb,var(--gs-rail-fg,#fff) 90%,transparent); border-left-color:transparent; border-radius:9px; font-weight:500; }
.gs-dash-shell .gs-sidebar .gs-sb-icon{ color:color-mix(in srgb,var(--gs-rail-fg,#fff) 50%,transparent); }
.gs-dash-shell .gs-sidebar .gs-sb-link:hover{ background:rgba(255,255,255,.18); color:#fff; }
.gs-dash-shell .gs-sidebar .gs-sb-link:hover .gs-sb-icon{ color:#fff; }
.gs-dash-shell .gs-sidebar .gs-sb-link.active,
.gs-dash-shell .gs-sidebar .gs-sb-link[aria-current="page"]{
  background:rgba(255,255,255,.26); color:#fff; border-left-color:#fff; font-weight:700;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.gs-dash-shell .gs-sidebar .gs-sb-link.active .gs-sb-icon{ color:#fff; }
.gs-dash-shell .gs-sidebar .gs-sb-kbd{ color:color-mix(in srgb,var(--gs-rail-fg,#fff) 70%,transparent); border-color:rgba(255,255,255,.32); background:rgba(255,255,255,.06); }
.gs-dash-shell .gs-sidebar .gs-sb-noresults{ color:color-mix(in srgb,var(--gs-rail-fg,#fff) 60%,transparent); }
.gs-dash-shell .gs-sidebar .gs-sb-footer{ border-top-color:rgba(255,255,255,.14); }
.gs-dash-shell .gs-sidebar .gs-sb-footer-link{ color:color-mix(in srgb,var(--gs-rail-fg,#fff) 90%,transparent); }
.gs-dash-shell .gs-sidebar .gs-sb-footer-link:hover{ background:rgba(255,255,255,.12); color:var(--gs-rail-fg,#fff); }
.gs-dash-shell .gs-sidebar .gs-sb-collapse-btn{ color:color-mix(in srgb,var(--gs-rail-fg,#fff) 75%,transparent); }
.gs-dash-shell .gs-sidebar .gs-sb-collapse-btn:hover{ background:rgba(255,255,255,.16); color:var(--gs-rail-fg,#fff); }

/* ==== LIGHT THEME: white dashboard sidebar with theme-colour accents (dark mode keeps the rail) ==== */
html:not([data-theme="dark"]) .gs-dash-shell .gs-sidebar{
  --gs-rail-fg: var(--gs-tx1,#1e293b);
  background: var(--gs-surface-0,#fff);
  color: var(--gs-tx1,#1e293b);
  border-right-color: var(--gs-border,#e5e7eb);
  box-shadow: 2px 0 18px rgba(15,23,42,.05);
}
html:not([data-theme="dark"]) .gs-dash-shell .gs-sidebar .gs-sb-search{ background:var(--gs-surface-1,#f8fafc); border-color:var(--gs-border,#e5e7eb); color:var(--gs-tx1,#1e293b); }
html:not([data-theme="dark"]) .gs-dash-shell .gs-sidebar .gs-sb-search::placeholder{ color:var(--gs-tx2,#94a3b8); }
html:not([data-theme="dark"]) .gs-dash-shell .gs-sidebar .gs-sb-search:focus{ border-color:var(--gs-cp,#5b21b6); }
html:not([data-theme="dark"]) .gs-dash-shell .gs-sidebar .gs-sb-search-wrap>.bi-search,
html:not([data-theme="dark"]) .gs-dash-shell .gs-sidebar .gs-sb-search-x{ color:var(--gs-tx2,#94a3b8); }
html:not([data-theme="dark"]) .gs-dash-shell .gs-sidebar .gs-sb-group-hd{ color:var(--gs-tx2,#94a3b8); }
html:not([data-theme="dark"]) .gs-dash-shell .gs-sidebar .gs-sb-group-hd:hover{ color:var(--gs-tx1,#475569); }
html:not([data-theme="dark"]) .gs-dash-shell .gs-sidebar .gs-sb-chev{ color:var(--gs-tx2,#94a3b8); }
html:not([data-theme="dark"]) .gs-dash-shell .gs-sidebar .gs-sb-group+.gs-sb-group>.gs-sb-group-hd{ border-top-color:var(--gs-border,#e5e7eb); }
html:not([data-theme="dark"]) .gs-dash-shell .gs-sidebar .gs-active-section>.gs-sb-group-hd,
html:not([data-theme="dark"]) .gs-dash-shell .gs-sidebar .gs-active-section>.gs-sb-group-hd .gs-sb-chev{ color:var(--gs-cp,#5b21b6); }
html:not([data-theme="dark"]) .gs-dash-shell .gs-sidebar .gs-sb-link{ color:var(--gs-tx1,#334155); }
html:not([data-theme="dark"]) .gs-dash-shell .gs-sidebar .gs-sb-icon{ color:var(--gs-tx2,#94a3b8); }
html:not([data-theme="dark"]) .gs-dash-shell .gs-sidebar .gs-sb-link:hover{ background:var(--gs-surface-1,#f1f5f9); color:var(--gs-tx1,#1e293b); }
html:not([data-theme="dark"]) .gs-dash-shell .gs-sidebar .gs-sb-link:hover .gs-sb-icon{ color:var(--gs-cp,#5b21b6); }
html:not([data-theme="dark"]) .gs-dash-shell .gs-sidebar .gs-sb-link.active,
html:not([data-theme="dark"]) .gs-dash-shell .gs-sidebar .gs-sb-link[aria-current="page"]{
  background:color-mix(in srgb, var(--gs-cp,#5b21b6) 12%, #fff);
  color:var(--gs-cp,#5b21b6); border-left-color:var(--gs-cp,#5b21b6); font-weight:700; box-shadow:none;
}
html:not([data-theme="dark"]) .gs-dash-shell .gs-sidebar .gs-sb-link.active .gs-sb-icon{ color:var(--gs-cp,#5b21b6); }
html:not([data-theme="dark"]) .gs-dash-shell .gs-sidebar .gs-sb-kbd{ color:var(--gs-tx2,#94a3b8); border-color:var(--gs-border,#e5e7eb); background:var(--gs-surface-1,#f8fafc); }
html:not([data-theme="dark"]) .gs-dash-shell .gs-sidebar .gs-sb-noresults{ color:var(--gs-tx2,#94a3b8); }
html:not([data-theme="dark"]) .gs-dash-shell .gs-sidebar .gs-sb-footer{ border-top-color:var(--gs-border,#e5e7eb); }
html:not([data-theme="dark"]) .gs-dash-shell .gs-sidebar .gs-sb-footer-link{ color:var(--gs-tx1,#334155); }
html:not([data-theme="dark"]) .gs-dash-shell .gs-sidebar .gs-sb-footer-link:hover{ background:var(--gs-surface-1,#f1f5f9); color:var(--gs-tx1,#1e293b); }
html:not([data-theme="dark"]) .gs-dash-shell .gs-sidebar .gs-sb-collapse-btn{ color:var(--gs-tx2,#94a3b8); }
html:not([data-theme="dark"]) .gs-dash-shell .gs-sidebar .gs-sb-collapse-btn:hover{ background:var(--gs-surface-1,#f1f5f9); color:var(--gs-cp,#5b21b6); }
@media (max-width:991.98px){
  html:not([data-theme="dark"]) .gs-dash-shell .gs-sidebar{ border-right-color:var(--gs-border,#e5e7eb); }
}

/* ---- mobile: drawer slides in from the LEFT ---- */
@media (max-width:991.98px){
  .gs-dash-shell .gs-sidebar{ right:auto; left:0; transform:translateX(-100%); border-right:1px solid rgba(255,255,255,.14); border-left:0; }
  .gs-dash-shell .gs-sidebar.mobile-open{ transform:translateX(0); }
}

/* ============================================================
 * DASHBOARD-UX-03 — Home spacing + MOBILE fixes
 * ============================================================ */
.gs-dash-shell .gs-sb-home{ margin:.15rem .25rem .4rem; } /* Home sits above Recent with breathing room */
.gs-dash-shell .gs-sidebar .gs-sb-group-hd:hover{ background:rgba(255,255,255,.08); }
.gs-dash-shell .gs-sidebar .gs-sb-chev{ color:#fff; opacity:.9; }
.gs-dash-shell .gs-sidebar .gs-sb-group-hd:hover .gs-sb-chev{ opacity:1; }
/* DARK RAIL ONLY. Unscoped, this painted the active group's label white on the LIGHT sidebar —
 * invisible text (the section heading simply vanished, leaving a bare chevron). Every sibling here
 * has a light counterpart in the html:not([data-theme="dark"]) block above; .gs-sb-group-label was
 * the one that didn't, so nothing overrode it. In light mode the label now inherits
 * .gs-sb-group-hd, which is already brand purple for the active section — matching its chevron. */
html[data-theme="dark"] .gs-dash-shell .gs-sidebar .gs-active-section>.gs-sb-group-hd,
html[data-theme="dark"] .gs-dash-shell .gs-sidebar .gs-active-section>.gs-sb-group-hd .gs-sb-group-label{ color:#fff; }
.gs-sb-group-items{
	margin-left:10px;
}
.gs-dash-shell .gs-sidebar .gs-sb-link:hover::before,
.gs-dash-shell .gs-sidebar .gs-sb-link.active::before{ opacity:.9; }
/* Home is the primary entry — keep it clean without a bullet. */
.gs-dash-shell .gs-sidebar .gs-sb-home::before{ display:none; }

/* ---- MOBILE (≤991.98px): make the whole dashboard usable on phones/tablets ---- */
@media (max-width:991.98px){
  /* Drawer: full-height, comfortable width, ABOVE the topbar; overlay just beneath it. */
  .gs-dash-shell .gs-sidebar{
    top:0; height:100dvh; width:min(86vw,310px) !important;
    z-index:1085; box-shadow:0 0 48px rgba(2,6,23,.45);
  }
  .gs-dash-shell .gs-sb-overlay{ z-index:1084; }
  /* Topbar: tighten so the controls fit a small screen. */
  .gs-dash-shell .gs-navbar{ padding-left:.7rem; padding-right:.7rem; gap:.35rem; }
  .gs-dash-shell .gs-nav-right{ gap:.2rem; }
  .gs-dash-shell .gs-hdr-help-btn{ display:none; }        /* keyboard-shortcuts button = desktop only */
  /* No accidental sideways scroll on any dashboard page. */
  .gs-dash-shell .gs-dash-main{ max-width:100vw; overflow-x:hidden; }
}
/* ---- PHONES (≤575.98px): denser spacing + safe tables/grids ---- */
@media (max-width:575.98px){
  .gs-dash-shell .gs-dash-content{ padding:1rem .9rem !important; }
  .gs-dash-shell .gs-dash-header{ padding:1rem .9rem !important; }
  .gs-dash-shell .gs-page-title{ font-size:1.35rem; line-height:1.2; }
  /* Wide tables scroll inside their card instead of stretching the page. */
  .gs-dash-shell .table-responsive,
  .gs-dash-shell .acc-scroll{ -webkit-overflow-scrolling:touch; }
  .gs-dash-shell table{ font-size:.82rem; }
  /* Cards: trim padding so content isn't cramped edge-to-edge. */
  .gs-dash-shell .gs-card-body,
  .gs-dash-shell .dh-card,
  .gs-dash-shell .gs-card{ padding-left:.85rem; padding-right:.85rem; }
  /* KPI / stat strips: 2-up on phones (was auto-fit, can get too tight). */
  .gs-dash-shell .dh-health{ grid-template-columns:repeat(2,1fr); }
  .gs-dash-shell .dh-strip{ grid-template-columns:repeat(3,1fr); }
  /* Quick-create chips wrap cleanly. */
  .gs-dash-shell .dh-qa a,.gs-dash-shell .cc-qa a{ flex:1 1 auto; justify-content:center; }
  /* Header dropdown menus never exceed the viewport. */
  .gs-dash-shell .gs-hdr-menu{ max-width:92vw; }
}
/* very small phones — single KPI column */
@media (max-width:380px){
  .gs-dash-shell .dh-health{ grid-template-columns:1fr; }
}

/* ============================================================
 * DASHBOARD form fields — single clean focus ring + label gap
 * The framework focus ring (white halo + strong 4px purple) layered on the 1.5px border read as a
 * "double border" and touched the label above. One soft ring + a gap below labels fixes it for all
 * dashboard inputs. Scoped to .gs-dash-shell so the public site keeps its own focus style.
 * ============================================================ */
.gs-dash-shell .gs-label{ display:block; margin-bottom:.35rem; }
.gs-dash-shell .gs-input:focus,
.gs-dash-shell .gs-select:focus,
.gs-dash-shell .gs-textarea:focus{
  border-color:var(--gs-cp,#5b21b6);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--gs-cp,#5b21b6) 16%, transparent);
  outline:none;
}

/* ===================== KNOWLEDGE CENTER (/help) — HELP-09A ===================== */
.kc-hero{background:var(--gs-surface-1,#f8fafc);border-bottom:1px solid var(--gs-border);padding:2.5rem 0;text-align:center}
.kc-h1{font-size:clamp(1.6rem,4vw,2.2rem);font-weight:800;margin:0 0 .35rem;color:var(--gs-text-primary,#0f172a)}
.kc-sub{color:var(--gs-text-secondary,#64748b);margin:0 0 1.25rem}
.kc-search{display:flex;align-items:center;gap:.5rem;max-width:560px;margin:0 auto;position:relative}
.kc-search .bi-search{position:absolute;left:14px;color:var(--gs-text-tertiary,#94a3b8);font-size:1.05rem;pointer-events:none}
.kc-search input{flex:1;height:46px;padding:0 .9rem 0 2.4rem;border:1px solid var(--gs-border);border-radius:12px;background:var(--gs-surface-0,#fff);color:var(--gs-text-primary,#0f172a);font-size:.95rem}
.kc-search input:focus{outline:none;border-color:var(--gs-cp,#5b21b6);box-shadow:0 0 0 3px color-mix(in srgb,var(--gs-cp,#5b21b6) 18%,transparent)}
.kc-search-sm{max-width:520px;margin:0 0 1.25rem}
.kc-quick{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:1rem}
.kc-chip{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--gs-border);background:var(--gs-surface-0,#fff);color:var(--gs-cp,#5b21b6);border-radius:999px;padding:.4rem .85rem;font-size:.85rem;font-weight:600;cursor:pointer;text-decoration:none}
.kc-chip:hover{background:var(--gs-cp-s,#f5f3ff);border-color:var(--gs-cp,#5b21b6)}
.kc-wrap{padding:2rem 0 3rem}
.kc-h2{font-size:1.3rem;font-weight:800;margin:0 0 1rem;color:var(--gs-text-primary,#0f172a)}
.kc-h3{font-size:.95rem;font-weight:700;margin:0 0 .6rem;color:var(--gs-text-primary,#0f172a);display:flex;align-items:center;gap:.4rem}
.kc-sub-l{color:var(--gs-text-secondary,#64748b);margin:-.4rem 0 1.25rem}
.kc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.9rem;margin-bottom:2rem}
.kc-cat{display:flex;flex-direction:column;gap:.15rem;padding:1.1rem;border:1px solid var(--gs-border);border-radius:14px;background:var(--gs-surface-0,#fff);text-decoration:none;transition:border-color .14s ease,box-shadow .14s ease,transform .14s ease}
.kc-cat:hover{border-color:var(--gs-cp,#5b21b6);box-shadow:0 8px 22px rgba(2,6,23,.08);transform:translateY(-2px)}
.kc-cat-ic{width:42px;height:42px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;background:var(--gs-cp-s,#f5f3ff);color:var(--gs-cp,#5b21b6);font-size:1.25rem;margin-bottom:.55rem}
.kc-cat-name{font-weight:700;color:var(--gs-text-primary,#0f172a)}
.kc-cat-count{font-size:.82rem;color:var(--gs-text-secondary,#64748b)}
.kc-cols{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.kc-col{border:1px solid var(--gs-border);border-radius:14px;padding:1.1rem 1.25rem;background:var(--gs-surface-0,#fff)}
.kc-link{display:block;padding:.5rem 0;border-bottom:1px solid var(--gs-border);color:var(--gs-text-primary,#334155);text-decoration:none;font-size:.92rem}
.kc-link:last-child{border-bottom:0}
.kc-link:hover{color:var(--gs-cp,#5b21b6)}
.kc-link.is-active{color:var(--gs-cp,#5b21b6);font-weight:700}
.kc-side-n{float:right;color:var(--gs-text-tertiary,#94a3b8);font-size:.8rem}
.kc-empty{color:var(--gs-text-secondary,#64748b);font-size:.9rem;padding:.5rem 0}
.kc-linkbtn{background:none;border:0;color:var(--gs-cp,#5b21b6);font-weight:600;cursor:pointer;padding:0}
.kc-bc{font-size:.82rem;color:var(--gs-text-tertiary,#94a3b8);margin-bottom:.75rem;display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.kc-bc a{color:var(--gs-cp,#5b21b6);text-decoration:none}
.kc-cols-side{display:grid;grid-template-columns:240px 1fr;gap:1.75rem;align-items:start}
.kc-side{border:1px solid var(--gs-border);border-radius:14px;padding:1rem 1.1rem;background:var(--gs-surface-0,#fff);position:sticky;top:1rem}
.kc-art{display:block;position:relative;padding:1rem 2.2rem 1rem 1.1rem;border:1px solid var(--gs-border);border-radius:12px;background:var(--gs-surface-0,#fff);text-decoration:none;margin-bottom:.7rem}
.kc-art:hover{border-color:var(--gs-cp,#5b21b6);box-shadow:0 6px 18px rgba(2,6,23,.07)}
.kc-art-t{display:block;font-weight:700;color:var(--gs-text-primary,#0f172a)}
.kc-art-ex{display:block;font-size:.86rem;color:var(--gs-text-secondary,#64748b);margin-top:.2rem}
.kc-art-arrow{position:absolute;right:1rem;top:50%;transform:translateY(-50%);color:var(--gs-text-tertiary,#cbd5e1)}
.kc-result-cat{font-size:.72rem;font-weight:600;color:var(--gs-cp,#5b21b6);background:var(--gs-cp-s,#f5f3ff);padding:.05rem .5rem;border-radius:999px;margin-left:.4rem;vertical-align:middle}
.kc-article{min-width:0}
.kc-h1-art{font-size:clamp(1.45rem,3.5vw,2rem);font-weight:800;margin:0 0 .35rem;color:var(--gs-text-primary,#0f172a)}
.kc-meta{font-size:.82rem;color:var(--gs-text-tertiary,#94a3b8);margin:0 0 1.25rem;display:flex;align-items:center;gap:.4rem}
.kc-helpful{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:1.75rem 0 0;padding-top:1.25rem;border-top:1px solid var(--gs-border);font-size:.9rem;color:var(--gs-text-secondary,#64748b)}
.kc-related{margin-top:1.75rem;padding-top:1.25rem;border-top:1px solid var(--gs-border)}
.kc-noresult{padding:1.5rem;border:1px dashed var(--gs-border);border-radius:14px;text-align:center;color:var(--gs-text-secondary,#64748b)}
.kc-noresult .kc-quick{margin-top:.9rem}
@media(max-width:768px){
  .kc-cols,.kc-cols-side{grid-template-columns:1fr}
  .kc-side{position:static}
  .kc-search input{height:44px}
}
/* Knowledge Center FAQ page */
.kc-faq{border:1px solid var(--gs-border);border-radius:14px;background:var(--gs-surface-0,#fff);overflow:hidden}
.kc-faq-item{border-bottom:1px solid var(--gs-border)}
.kc-faq-item:last-child{border-bottom:0}
.kc-faq-q{display:flex;align-items:center;justify-content:space-between;gap:1rem;cursor:pointer;list-style:none;padding:.9rem 1.1rem;font-weight:600;color:var(--gs-text-primary,#0f172a)}
.kc-faq-q::-webkit-details-marker{display:none}
.kc-faq-q i{transition:transform .18s ease;color:var(--gs-text-tertiary,#94a3b8)}
.kc-faq-item[open] .kc-faq-q i{transform:rotate(180deg)}
.kc-faq-a{padding:0 1.1rem 1rem;color:var(--gs-text-secondary,#475569);line-height:1.6}
/* Knowledge Center language switcher + translation notice */
.kc-langsw{display:inline-flex;gap:2px;border:1px solid var(--gs-border);border-radius:999px;padding:3px;margin:0 auto .9rem;background:var(--gs-surface-0,#fff)}
.kc-hero .kc-langsw{margin-bottom:1rem}
.kc-langsw-r{float:right;margin:0 0 .5rem}
.kc-langsw a{padding:.25rem .7rem;border-radius:999px;font-size:.8rem;font-weight:600;color:var(--gs-text-secondary,#64748b);text-decoration:none}
.kc-langsw a.is-on{background:var(--gs-cp,#5b21b6);color:var(--gs-cp-fg,#fff)}
.kc-tr-note{clear:both;background:var(--gs-cp-s,#f5f3ff);border:1px solid var(--gs-border);border-radius:10px;padding:.6rem .8rem;margin:0 0 1rem;font-size:.85rem;color:var(--gs-text-secondary,#475569)}
/* Knowledge Center — What's New feed */
.kc-rn{display:flex;gap:1rem;margin-bottom:1rem}
.kc-rn-date{flex:0 0 96px;text-align:right;font-size:.78rem;color:var(--gs-text-tertiary,#94a3b8);padding-top:.2rem}
.kc-rn-new{display:inline-block;margin-top:.3rem;padding:1px 8px;border-radius:999px;background:var(--gs-cs-s,#dcfce7);color:var(--gs-cs,#16a34a);font-size:.66rem;font-weight:700}
.kc-rn-card{flex:1;border:1px solid var(--gs-border);border-radius:14px;background:var(--gs-surface-0,#fff);padding:1rem 1.1rem}
.kc-rn-title{font-weight:700;font-size:1.02rem;color:var(--gs-text-primary,#0f172a);text-decoration:none}
.kc-rn-title:hover{color:var(--gs-cp,#5b21b6)}
.kc-rn-desc{margin:.4rem 0 .5rem;color:var(--gs-text-secondary,#64748b);font-size:.9rem;line-height:1.55}
.kc-rn-more{font-size:.84rem;color:var(--gs-cp,#5b21b6);text-decoration:none;font-weight:600}
.kc-rn-soon{align-self:flex-start;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:2px 8px;border-radius:999px;border:1px solid var(--gs-border);color:var(--gs-text-tertiary,#94a3b8)}
@media(max-width:640px){.kc-rn-date{flex-basis:72px}}

/* Knowledge Center — video player (article reader) */
.kc-video{position:relative;margin:1.1rem 0 1.4rem;border-radius:14px;overflow:hidden;background:#0b0e19;aspect-ratio:16/9}
.kc-video iframe,.kc-video .kc-video-self{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;object-fit:cover}
.kc-video-yt{position:absolute;inset:0;background-size:cover;background-position:center;background-color:#11142b;cursor:pointer;display:flex;align-items:center;justify-content:center}
.kc-video-yt::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(91,33,182,.45),rgba(11,14,25,.55))}
.kc-video-play{position:relative;z-index:1;width:72px;height:72px;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:var(--gs-cp,#5b21b6);font-size:2rem;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 28px rgba(0,0,0,.35);transition:transform .15s}
.kc-video-yt:hover .kc-video-play{transform:scale(1.08)}

/* Knowledge Center — auto-generated walkthrough "video" */
.kc-wt{margin:1.1rem 0 1.4rem;border-radius:14px;overflow:hidden;border:1px solid var(--gs-border);background:#0b0e19}
.kc-wt-stage{position:relative;aspect-ratio:16/9;background:radial-gradient(120% 120% at 0% 0%,#3b1d8f 0%,#0b0e19 60%),radial-gradient(120% 120% at 100% 100%,#155e45 0%,transparent 55%);color:#fff;overflow:hidden}
.kc-wt-slide{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:.8rem;padding:clamp(1.2rem,4vw,2.6rem);opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s;pointer-events:none}
.kc-wt-slide.is-on{opacity:1;transform:none;pointer-events:auto}
.kc-wt-tag{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:.3rem .75rem;border-radius:999px;background:rgba(255,255,255,.15)}
.kc-wt-tag-done{background:rgba(34,197,94,.22);color:#bbf7d0}
.kc-wt-h{font-size:clamp(1.3rem,3.5vw,2rem);font-weight:800;margin:0;line-height:1.2;color:#fff}
.kc-wt-p{font-size:clamp(.92rem,2vw,1.05rem);color:rgba(255,255,255,.82);margin:0;max-width:46ch;line-height:1.55}
.kc-wt-step-no{font-size:.82rem;font-weight:700;color:#c4b5fd;letter-spacing:.04em;text-transform:uppercase}
.kc-wt-step-no small{color:rgba(255,255,255,.5)}
.kc-wt-step{font-size:clamp(1.05rem,2.6vw,1.5rem);font-weight:600;line-height:1.4;margin:0;max-width:40ch;color:#fff}
.kc-wt-bar{height:4px;background:rgba(255,255,255,.12)}
.kc-wt-bar #kc-wt-fill{display:block;height:100%;width:0;background:linear-gradient(90deg,#a78bfa,#34d399)}
.kc-wt-ctrls{display:flex;align-items:center;gap:.55rem;padding:.55rem .8rem;background:#11142b;color:#fff}
.kc-wt-btn{width:34px;height:34px;border:0;border-radius:8px;background:rgba(255,255,255,.1);color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:1rem}
.kc-wt-btn:hover{background:rgba(255,255,255,.2)}
.kc-wt-count{font-size:.82rem;color:rgba(255,255,255,.7);font-weight:600}
.kc-wt-note{margin-left:auto;font-size:.72rem;color:rgba(255,255,255,.45)}
@media(max-width:560px){.kc-wt-note{display:none}}

/* Knowledge Center — guided learning path */
.kc-sub-l{color:var(--gs-text-secondary,#64748b);margin:-.4rem 0 1rem;font-size:.92rem}
.kc-path{list-style:none;margin:0 0 2rem;padding:0;display:flex;flex-direction:column;gap:.55rem;counter-reset:none}
.kc-path-step{display:flex;align-items:center;gap:.85rem;border:1px solid var(--gs-border);border-radius:12px;background:var(--gs-surface-0,#fff);padding:.7rem .9rem}
.kc-path-step.is-soon{opacity:.78}
.kc-path-no{flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:var(--gs-cp-s,#f5f3ff);color:var(--gs-cp,#5b21b6);font-weight:700;font-size:.85rem;display:flex;align-items:center;justify-content:center}
.kc-path-link{flex:1;font-weight:600;color:var(--gs-text-primary,#0f172a);text-decoration:none}
.kc-path-link:hover{color:var(--gs-cp,#5b21b6)}
.kc-path-tag{font-size:.74rem;font-weight:700;color:var(--gs-cp,#5b21b6);white-space:nowrap}
.kc-path-step.is-soon .kc-path-tag{color:var(--gs-text-tertiary,#94a3b8);font-weight:600}

/* Knowledge Center — video grid */
.kc-vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.1rem;margin:.4rem 0 1.4rem}
.kc-vcard{display:flex;flex-direction:column;border:1px solid var(--gs-border);border-radius:14px;overflow:hidden;background:var(--gs-surface-0,#fff);text-decoration:none;transition:transform .15s,box-shadow .15s}
.kc-vcard:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(15,23,42,.1)}
.kc-vcard.is-soon{opacity:.85}
.kc-vthumb{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,#5b21b6,#7c3aed);background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;color:#fff;font-size:2.2rem}
.kc-vsoon{position:absolute;bottom:8px;left:8px;font-style:normal;font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;background:rgba(0,0,0,.55);padding:2px 8px;border-radius:999px}
.kc-vbody{padding:.8rem .9rem;display:flex;flex-direction:column;gap:.3rem}
.kc-vcat{font-size:.72rem;font-weight:600;color:var(--gs-cp,#5b21b6);display:flex;align-items:center;gap:.3rem}
.kc-vtitle{font-weight:700;font-size:.98rem;color:var(--gs-text-primary,#0f172a);line-height:1.3}
.kc-vexc{font-size:.82rem;color:var(--gs-text-secondary,#64748b);line-height:1.45}

/* Knowledge Center — "Was this helpful?" feedback */
.kc-helpful-no{flex-basis:100%;margin-top:.9rem;padding:1rem;border:1px solid var(--gs-border);border-radius:12px;background:var(--gs-surface-1,#f8fafc)}
.kc-helpful-lbl{display:block;font-weight:600;font-size:.9rem;color:var(--gs-text-primary,#0f172a);margin-bottom:.6rem}
.kc-helpful-lbl span{font-weight:400;color:var(--gs-text-secondary,#64748b)}
.kc-reason-chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:.7rem}
.kc-reason-chip{padding:.35rem .8rem;border:1px solid var(--gs-border);border-radius:999px;background:var(--gs-surface-0,#fff);color:var(--gs-text-secondary,#475569);font-size:.82rem;font-weight:600;cursor:pointer}
.kc-reason-chip:hover{border-color:var(--gs-cp,#5b21b6);color:var(--gs-cp,#5b21b6)}
.kc-reason-chip.is-on{background:var(--gs-cp,#5b21b6);border-color:var(--gs-cp,#5b21b6);color:var(--gs-cp-fg,#fff)}
.kc-helpful-comment{width:100%;border:1px solid var(--gs-border);border-radius:10px;padding:.6rem .7rem;font:inherit;font-size:.88rem;resize:vertical;background:var(--gs-surface-0,#fff);color:var(--gs-text-primary,#0f172a)}
.kc-helpful-actions{display:flex;gap:.5rem;margin-top:.7rem}
.kc-helpful-thanks{flex-basis:100%;margin:.8rem 0 0;color:var(--gs-cs,#16a34a);font-weight:600;font-size:.9rem}

/* Knowledge Center — pagination */
.kc-pagination{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.4rem}
.kc-page{min-width:38px;height:38px;padding:0 .7rem;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--gs-border);border-radius:10px;background:var(--gs-surface-0,#fff);color:var(--gs-text-primary,#0f172a);font-weight:600;font-size:.88rem;text-decoration:none}
.kc-page:hover{border-color:var(--gs-cp,#5b21b6);color:var(--gs-cp,#5b21b6)}
.kc-page.is-on{background:var(--gs-cp,#5b21b6);border-color:var(--gs-cp,#5b21b6);color:var(--gs-cp-fg,#fff)}

/* ===== CUSTOMER-01Q+ : plan feature "?" help tooltip ===== */
.gs-feat-q{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;
  border:1px solid var(--gs-cp,#5B21B6);background:transparent;color:var(--gs-cp,#5B21B6);font-size:.68rem;font-weight:700;
  cursor:pointer;margin-left:.2rem;line-height:1;padding:0;vertical-align:middle;flex:none}
.gs-feat-q:hover,.gs-feat-q:focus-visible{background:var(--gs-cp,#5B21B6);color:var(--gs-cp-fg,#fff);outline:none}
.gs-feat-pop{position:fixed;z-index:9999;max-width:260px;background:#1e293b;color:#fff;font-size:.8rem;line-height:1.45;
  padding:.5rem .65rem;border-radius:8px;box-shadow:0 8px 24px rgba(15,23,42,.22);pointer-events:none}

/* ===== Plan slider (desktop-only, manual arrows, 3 per view when >3 plans) ===== */
.gs-plan-slider{position:relative}
.gs-plan-arrow{display:none;position:absolute;top:42%;transform:translateY(-50%);z-index:6;width:44px;height:44px;
  border-radius:50%;border:1px solid var(--gs-border,#e2e8f0);background:#fff;color:var(--gs-cp,#5B21B6);
  align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 18px rgba(15,23,42,.14);font-size:1.05rem}
.gs-plan-arrow:hover{background:var(--gs-cp,#5B21B6);color:var(--gs-cp-fg,#fff)}
.gs-plan-arrow[disabled]{opacity:.3;cursor:default;box-shadow:none}
.gs-plan-arrow.prev{left:-8px}.gs-plan-arrow.next{right:-8px}
@media (min-width:992px){
  /* transform carousel — exactly 3 full cards per view; clip the rest (viewport), reveal with the arrows */
  .gs-plan-slider.is-slider .gs-plan-viewport{overflow:hidden}
  .gs-plan-slider.is-slider .gs-plan-track{flex-wrap:nowrap!important;justify-content:flex-start!important;
    margin-left:0!important;margin-right:0!important;transition:transform .35s ease;padding:1.5rem 0 .75rem}
  .gs-plan-slider.is-slider .gs-plan-track > [class*="col-"]{flex:0 0 33.333%!important;max-width:33.333%!important}
  /* the "most popular" scale overflows its column and peeks as a 4th card — keep it flat while sliding */
  .gs-plan-slider.is-slider .gs-price-card.popular{transform:none!important}
  /* arrow visibility is driven by JS (inline display) so prev hides on the first view, next hides at the end */
}

/* ===== Business Settings Center (SETTINGS-03C) — left nav (desktop) / scroll-tabs (mobile) ===== */
.biz-settings{display:flex;gap:1.25rem;align-items:flex-start}
.biz-settings-nav{flex:0 0 220px;position:sticky;top:1rem;display:flex;flex-direction:column;gap:.2rem;
  background:var(--gs-surface-0,#fff);border:1px solid var(--gs-bd0,#e5e7eb);border-radius:.85rem;padding:.5rem}
.biz-nav-item{display:flex;align-items:center;gap:.6rem;padding:.6rem .75rem;border-radius:.6rem;
  color:var(--gs-tx1,#334155);text-decoration:none;font-size:.9rem;font-weight:600;white-space:nowrap}
.biz-nav-item i{font-size:1.05rem;color:var(--gs-tx2,#64748b);flex:none}
.biz-nav-item:hover{background:var(--gs-sf1,#f8fafc)}
.biz-nav-item.active{background:color-mix(in srgb,var(--gs-cp,#5b21b6) 12%,#fff);color:var(--gs-cp,#5b21b6)}
.biz-nav-item.active i{color:var(--gs-cp,#5b21b6)}
.biz-settings-body{flex:1;min-width:0}
/* Page title inside the content column (the dashboard header band is hidden on this page). */
.biz-settings-head{margin:0 0 1rem}
.biz-settings-head h1{font-size:1.3rem;font-weight:800;margin:0;letter-spacing:-.01em}
.biz-settings-head p{margin:.2rem 0 0;font-size:.875rem;color:var(--gs-tx2,#64748b)}
@media (max-width:860px){
  .biz-settings{flex-direction:column;gap:.85rem}
  .biz-settings-nav{flex:none;width:100%;position:static;flex-direction:row;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;padding:.4rem}
  .biz-settings-nav::-webkit-scrollbar{display:none}
  .biz-nav-item{flex:0 0 auto}
}

/* ===== TOOL AVAILABILITY — operational status banner (detail) + badge (cards) ===== */
.gs-tool-notice{display:flex;gap:.85rem;align-items:flex-start;padding:.9rem 1.1rem;margin:0 0 1.25rem;border-radius:12px;
  border:1px solid color-mix(in srgb,var(--an-c,#d97706) 32%,transparent);
  background:color-mix(in srgb,var(--an-c,#d97706) 9%,transparent);
  border-left:4px solid var(--an-c,#d97706)}
.gs-tool-notice-ic{flex:0 0 auto;font-size:1.4rem;color:var(--an-c,#d97706);line-height:1.1}
.gs-tool-notice-body{display:flex;flex-direction:column;gap:.12rem}
.gs-tool-notice-body strong{font-size:.98rem;color:var(--gs-tx1,#0f172a)}
.gs-tool-notice-body span{font-size:.88rem;color:var(--gs-tx2,#475569)}
.gs-tool-avail-badge{display:inline-flex;align-items:center;gap:.25rem;font-weight:600;white-space:nowrap}

/* ===== Goji Suite catalog (pricing cards): savings + upgrade hint ===== */
.gs-suite-savings{display:inline-flex;align-items:center;gap:.3rem;margin:.1rem 0 .45rem;font-size:.7rem;font-weight:600;
  white-space:nowrap;max-width:100%;letter-spacing:.005em;
  color:#15803d;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:999px;padding:.2rem .6rem}
.gs-suite-savings .bi{font-size:.78rem;flex:0 0 auto}
.gs-suite-upgrade{margin:.55rem 0 0;font-size:.78rem;color:var(--gs-tx2,#64748b);line-height:1.35}

/* ===== Pricing per-tool filter chips (/pricing/{tool-slug}) ===== */
.gs-pricing-filter{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin:1.4rem auto 1.75rem;max-width:900px}
.gs-pf-chip{display:inline-flex;align-items:center;padding:.4rem .85rem;border-radius:999px;font-size:.84rem;font-weight:600;
  text-decoration:none;border:1px solid color-mix(in srgb,var(--gs-cp,#5b21b6) 30%,transparent);
  color:var(--gs-cp,#5b21b6);background:transparent;transition:background .15s,color .15s}
.gs-pf-chip:hover{background:color-mix(in srgb,var(--gs-cp,#5b21b6) 10%,transparent)}
.gs-pf-chip.is-active{background:var(--gs-cp,#5b21b6);color:var(--gs-cp-fg,#fff);border-color:var(--gs-cp,#5b21b6)}

/* Guard against horizontal overflow site-wide. `clip` (not `hidden`) removes the x-scroll WITHOUT
   creating a scroll container, so position:sticky (navbar) keeps working and vertical scroll is unaffected. */
html{overflow-x:clip}

/* --- UI-ARCH-01: from customer/returns-new.php --- */
.cp-radio{flex:1;border:1px solid #e2e8f0;border-radius:10px;padding:.6rem;font-size:.86rem;display:flex;align-items:center;gap:.4rem;cursor:pointer}
.cp-itemrow{display:flex;align-items:center;gap:.5rem;border-bottom:1px solid #f1f5f9;padding:.5rem 0;font-size:.9rem}
.cp-itemrow input{width:18px;height:18px}

/* UI: Suite bundle "Included products" rows — match the existing .gs-plan-feats feature-line style
   (bundle <li> inherits the normal feature-line layout; no flex right-align, so long names never push
   the "worth" onto an awkward second line). */
.gs-bundle-block{margin:.25rem 0 .5rem}
.gs-bundle-head{display:flex;align-items:center;flex-wrap:nowrap;gap:.3rem;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.01em;color:var(--gs-tx2,#64748b);margin:0 0 .5rem;white-space:nowrap}
.gs-bundle-head .bi{font-size:.8rem;flex:0 0 auto}
.gs-bundle-worth-total{margin-left:auto;font-weight:600;text-transform:none;letter-spacing:0;color:var(--gs-cs,#16a34a);white-space:nowrap}
.gs-bundle-list{margin-bottom:.5rem}
.gs-bundle-name{font-weight:600;color:var(--gs-cp,#5b21b6)}
/* equal-height plan cards: push the CTA to the bottom so buttons line up (no-op on natural-height cards) */
.gs-price-card.h-100 .gs-btn-block{margin-top:auto}
/* "+N more features" — the LAST item inside the features list (cards cap to a uniform total) */
.gs-feat-more-li{list-style:none}
.gs-feat-more-link{font-size:.8125rem;font-weight:600;color:var(--gs-cp,#5b21b6);text-decoration:none}
.gs-feat-more-link:hover{text-decoration:underline}
.gs-feat-more-link .bi{font-size:.72rem;vertical-align:baseline}
/* worth + Learn-more now live INSIDE the ? popover (gs-feat-pop-rich), so the row stays a clean single line */
.gs-feat-pop-rich{pointer-events:auto;max-width:280px}
.gs-feat-pop-desc{margin-bottom:.4rem}
.gs-feat-pop-worth{font-weight:700;color:#86efac}
.gs-feat-pop-link{display:inline-block;margin-top:.45rem;color:#c4b5fd;font-weight:600;text-decoration:none}
.gs-feat-pop-link:hover{text-decoration:underline;color:#ddd6fe}

/* ===== Homepage — User Dashboard showcase (scroll-animated, device-friendly) ===== */
.gs-dboard [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .7s cubic-bezier(.16,.84,.44,1);transition-delay:var(--d,0ms)}
.gs-dboard.is-in [data-reveal]{opacity:1;transform:none}
.gs-dboard-feats{list-style:none;margin:1.5rem 0;padding:0;display:flex;flex-direction:column;gap:1rem}
.gs-dboard-feats li{display:flex;gap:.85rem;align-items:flex-start}
.gs-dboard-ficon{flex:0 0 40px;width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:1.05rem;color:var(--gs-cp,#5b21b6);background:linear-gradient(135deg,var(--gs-cp-s,#f5f3ff),#fff)}
.gs-dboard-ftext{display:flex;flex-direction:column;line-height:1.4}
.gs-dboard-ftext strong{font-size:.95rem;color:var(--gs-text-primary)}
.gs-dboard-ftext span{font-size:.85rem;color:var(--gs-text-secondary)}
.gs-dboard-stage{position:relative;max-width:640px;margin-inline:auto}
.gs-dboard-mock{width:100%;overflow:hidden}
/* left sidebar (kept) + body that mirrors the real Business Workspace overview */
.gs-dboard-shell{display:flex;min-height:300px}
.gs-dboard-side{flex:0 0 140px;background:var(--gs-surface-1,#fff);border-right:1px solid var(--gs-bd0,#e2e8f0);padding:.85rem .55rem;display:flex;flex-direction:column;gap:.25rem}
.gs-dboard-navitem{display:flex;align-items:center;gap:.5rem;font-size:.74rem;color:var(--gs-tx2,#64748b);padding:.4rem .55rem;border-radius:8px;white-space:nowrap}
.gs-dboard-navitem.is-active{background:var(--gs-cp-s,#f5f3ff);color:var(--gs-cp,#5b21b6);font-weight:600}
.gs-dboard-body{flex:1;min-width:0;padding:.85rem;display:flex;flex-direction:column;gap:.65rem;background:var(--gs-sf2,#f8fafc)}
.gs-dboard-welcome{background:linear-gradient(135deg,#5b21b6,#7c3aed);color:#fff;border-radius:12px;padding:.7rem .85rem;display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.gs-dboard-welcome-txt{display:flex;flex-direction:column;gap:.2rem;min-width:0;flex:1}
.gs-dboard-welcome-txt strong{font-size:.78rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gs-dboard-welcome-txt > span{font-size:.66rem;opacity:.85}
.gs-dboard-prog{height:6px;background:rgba(255,255,255,.28);border-radius:99px;overflow:hidden;margin-top:.2rem}
.gs-dboard-prog i{display:block;height:100%;width:0;background:#fff;border-radius:99px;transition:width 1s cubic-bezier(.16,.84,.44,1) .3s}
.gs-dboard.is-in .gs-dboard-prog i{width:var(--w,80%)}
.gs-dboard-welcome-pct{font-size:1.35rem;font-weight:800;flex:0 0 auto}
.gs-dboard-chips{display:flex;flex-wrap:wrap;gap:.35rem}
.gs-dboard-chip{display:inline-flex;align-items:center;gap:.25rem;font-size:.64rem;font-weight:600;color:var(--gs-cp,#5b21b6);background:var(--gs-surface-1,#fff);border:1px solid var(--gs-bd0,#e2e8f0);border-radius:8px;padding:.25rem .45rem}
.gs-dboard-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}
.gs-dboard-kpi{background:var(--gs-surface-1,#fff);border:1px solid var(--gs-bd0,#e2e8f0);border-left:3px solid var(--gs-bd0,#e2e8f0);border-radius:10px;padding:.5rem .6rem}
.gs-dboard-kpi .l{font-size:.58rem;text-transform:uppercase;letter-spacing:.04em;color:var(--gs-tx2,#64748b);font-weight:700}
.gs-dboard-kpi .n{font-size:.95rem;font-weight:800;color:var(--gs-text-primary);line-height:1.15;margin-top:.2rem;white-space:nowrap}
.gs-dboard-kpi.k-rev{border-left-color:#16a34a}
.gs-dboard-kpi.k-ord{border-left-color:#0ea5e9}
.gs-dboard-kpi.k-cus{border-left-color:#8b5cf6}
.gs-dboard-kpi.k-net{border-left-color:#10b981}
.gs-dboard-orders{background:var(--gs-surface-1,#fff);border:1px solid var(--gs-bd0,#e2e8f0);border-radius:12px;padding:.7rem .8rem}
.gs-dboard-orders-hd{display:flex;justify-content:space-between;align-items:center;font-size:.72rem;font-weight:700;color:var(--gs-text-primary);margin-bottom:.55rem}
.gs-dboard-orders-hd span{color:var(--gs-tx2,#64748b);font-weight:500}
.gs-dboard-ostat{display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem}
.gs-dboard-ostat:last-child{margin-bottom:0}
.gs-dboard-ostat .lbl{flex:0 0 66px;font-size:.66rem;font-weight:600}
.gs-dboard-ostat .bar{flex:1;height:13px;background:var(--gs-sf2,#f1f5f9);border-radius:99px;overflow:hidden}
.gs-dboard-ostat .bar i{display:block;height:100%;width:0;border-radius:99px;transition:width .85s cubic-bezier(.16,.84,.44,1);transition-delay:var(--d,0ms)}
.gs-dboard.is-in .gs-dboard-ostat .bar i{width:var(--w,50%)}
.gs-dboard-ostat .ct{flex:0 0 16px;font-size:.7rem;font-weight:700;color:var(--gs-text-primary);text-align:right}
.gs-dboard-badge{position:absolute;display:inline-flex;align-items:center;gap:.4rem;background:var(--gs-surface-1,#fff);border:1px solid var(--gs-bd0,#e2e8f0);box-shadow:0 10px 30px -10px rgba(2,6,23,.25);border-radius:999px;padding:.4rem .7rem;font-size:.75rem;font-weight:600;color:var(--gs-text-primary);z-index:2}
.gs-dboard-badge i{color:var(--gs-cp,#5b21b6)}
.gs-dboard-badge-1{bottom:16%;left:-14px}
.gs-dboard-badge-2{bottom:12%;right:-10px}
.gs-dboard.is-in .gs-dboard-badge{animation:gsDbFloat 4s ease-in-out infinite}
@keyframes gsDbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media(max-width:575.98px){
  .gs-dboard-side{flex-basis:46px;padding:.7rem .3rem}
  .gs-dboard-navitem{font-size:0;gap:0;justify-content:center}
  .gs-dboard-navitem i{font-size:1rem}
  .gs-dboard-kpis{grid-template-columns:repeat(2,1fr)}
  .gs-dboard-welcome-txt strong{font-size:.72rem;white-space:normal}
  .gs-dboard-badge{display:none}
}
@media(prefers-reduced-motion:reduce){
  .gs-dboard [data-reveal]{opacity:1;transform:none;transition:none}
  .gs-dboard .gs-dboard-prog i,.gs-dboard .gs-dboard-ostat .bar i{transition:none}
  .gs-dboard.is-in .gs-dboard-badge{animation:none}
}

/* ===== Homepage S06 — Browse by Category: brand promo card + featured grid (brand-colored) ===== */
.gs-feat-wrap{display:grid;grid-template-columns:minmax(290px,1fr) 2fr;gap:2rem;align-items:stretch}
.gs-feat-promo{position:relative;overflow:hidden;border-radius:20px;padding:2.4rem;color:#fff;display:flex;flex-direction:column;background:linear-gradient(150deg,var(--gs-cp,#5b21b6),#7c3aed 58%,#4c1d95);box-shadow:0 24px 50px -22px rgba(91,33,182,.6)}
.gs-feat-promo-glow{position:absolute;width:280px;height:280px;border-radius:50%;top:-90px;right:-70px;background:radial-gradient(circle,rgba(255,255,255,.22),transparent 70%);pointer-events:none}
.gs-feat-promo-icon{width:56px;height:56px;border-radius:16px;display:inline-flex;align-items:center;justify-content:center;font-size:1.6rem;color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);box-shadow:0 8px 24px -8px rgba(0,0,0,.35);margin-bottom:1.5rem}
.gs-feat-promo-eyebrow{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.7);margin:0 0 .6rem}
.gs-feat-promo-title{font-family:var(--gs-font-display,inherit);font-size:clamp(1.5rem,2.4vw,2rem);font-weight:800;line-height:1.15;letter-spacing:-.02em;margin:0 0 .85rem}
.gs-feat-promo-sub{font-size:.95rem;line-height:1.6;color:rgba(255,255,255,.82);margin:0 0 1.6rem}
.gs-feat-promo-btn{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:.5rem;background:#fff;color:var(--gs-cp,#5b21b6);font-weight:700;font-size:.9rem;border-radius:999px;padding:.7rem 1.4rem;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}
.gs-feat-promo-btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px -8px rgba(0,0,0,.4);color:var(--gs-cp,#5b21b6)}
.gs-feat-promo-btn i{transition:transform .2s ease}
.gs-feat-promo-btn:hover i{transform:translateX(3px)}
.gs-feat-main{display:flex;flex-direction:column}
.gs-feat-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-bottom:1rem;margin-bottom:1.5rem;border-bottom:1px solid var(--gs-bd0,#e2e8f0)}
.gs-feat-label{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--gs-tx2,#64748b)}
.gs-feat-all{display:inline-flex;align-items:center;gap:.3rem;font-size:.82rem;font-weight:700;color:var(--gs-cp,#5b21b6);text-decoration:none;white-space:nowrap}
.gs-feat-all:hover{color:var(--gs-cp-h,#6d28d9);text-decoration:underline}
.gs-feat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem 2rem}
.gs-feat-item{display:flex;gap:.95rem;align-items:flex-start;text-decoration:none;border-radius:12px;padding:.35rem;margin:-.35rem;transition:background .2s ease,transform .2s ease}
.gs-feat-item:hover{background:var(--gs-cp-s,#f5f3ff);transform:translateX(2px)}
.gs-feat-item-icon{flex:0 0 46px;width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:1.35rem;color:var(--gs-cp,#5b21b6);background:var(--gs-cp-s,#f5f3ff);transition:transform .2s ease}
.gs-feat-item:hover .gs-feat-item-icon{transform:scale(1.08)}
.gs-feat-item-body{display:flex;flex-direction:column;min-width:0}
.gs-feat-item-name{font-family:var(--gs-font-display,inherit);font-size:1.05rem;font-weight:700;color:var(--gs-text-primary);line-height:1.25;display:flex;align-items:center;gap:.35rem}
.gs-feat-item-name i{font-size:.8rem;opacity:0;transform:translateX(-4px);color:var(--gs-cp,#5b21b6);transition:opacity .2s ease,transform .2s ease}
.gs-feat-item:hover .gs-feat-item-name{color:var(--gs-cp,#5b21b6)}
.gs-feat-item:hover .gs-feat-item-name i{opacity:1;transform:none}
.gs-feat-item-desc{font-size:.85rem;color:var(--gs-text-secondary);line-height:1.5;margin-top:.25rem;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media(min-width:1200px){.gs-feat-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:991.98px){.gs-feat-wrap{grid-template-columns:1fr}.gs-feat-promo{padding:2rem}}
@media(max-width:575.98px){.gs-feat-grid{grid-template-columns:1fr}}

/* ===== Homepage S06b — Goji AI live chat showcase (brand-colored, animated) ===== */
.gs-ai-sec [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .7s cubic-bezier(.16,.84,.44,1);transition-delay:var(--d,0ms)}
.gs-ai-sec.is-in [data-reveal]{opacity:1;transform:none}
.gs-ai-feats{list-style:none;margin:1.5rem 0;padding:0;display:flex;flex-direction:column;gap:1rem}
.gs-ai-feats li{display:flex;gap:.85rem;align-items:flex-start}
.gs-ai-ficon{flex:0 0 42px;width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:var(--gs-cp,#5b21b6);background:var(--gs-cp-s,#f5f3ff)}
.gs-ai-ftext{display:flex;flex-direction:column;line-height:1.45}
.gs-ai-ftext strong{font-size:.95rem;color:var(--gs-text-primary)}
.gs-ai-ftext span{font-size:.85rem;color:var(--gs-text-secondary)}
.gs-ai-stage{position:relative;max-width:560px;margin-inline:auto}
.gs-ai-chat{background:var(--gs-surface-1,#fff);border:1px solid var(--gs-bd0,#e2e8f0);border-radius:20px;overflow:hidden;box-shadow:0 28px 60px -28px rgba(91,33,182,.5)}
.gs-ai-chat-head{display:flex;align-items:center;gap:.7rem;padding:.85rem 1rem;background:linear-gradient(135deg,var(--gs-cp,#5b21b6),#7c3aed);color:#fff}
.gs-ai-ava{flex:0 0 38px;width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:1.15rem;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.25)}
.gs-ai-chat-id{display:flex;flex-direction:column;line-height:1.2;flex:1;min-width:0}
.gs-ai-chat-id strong{font-size:.92rem}
.gs-ai-status{font-size:.68rem;opacity:.9;display:flex;align-items:center;gap:.35rem}
.gs-ai-dot{width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 0 rgba(74,222,128,.7);animation:gsAiPulse 2s infinite}
@keyframes gsAiPulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,.6)}70%{box-shadow:0 0 0 6px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
.gs-ai-channels{display:flex;gap:.5rem;font-size:.9rem;opacity:.85}
.gs-ai-chat-body{padding:1rem;display:flex;flex-direction:column;gap:.7rem;background:var(--gs-sf2,#f8fafc);min-height:320px;max-height:400px;overflow-y:auto;scroll-behavior:smooth}
.gs-ai-msg{display:flex;flex-direction:column;max-width:82%}
.gs-ai-msg.in{align-self:flex-start;align-items:flex-start}
.gs-ai-msg.out{align-self:flex-end;align-items:flex-end}
.gs-ai-ch{font-size:.64rem;font-weight:700;color:var(--gs-tx2,#64748b);margin:0 0 .25rem .15rem;display:inline-flex;align-items:center;gap:.3rem;text-transform:uppercase;letter-spacing:.03em}
.gs-ai-bubble{font-size:.84rem;line-height:1.5;padding:.6rem .85rem;border-radius:16px}
.gs-ai-msg.in .gs-ai-bubble{background:var(--gs-surface-1,#fff);border:1px solid var(--gs-bd0,#e2e8f0);color:var(--gs-text-primary);border-bottom-left-radius:5px}
.gs-ai-msg.out .gs-ai-bubble{background:linear-gradient(135deg,var(--gs-cp,#5b21b6),#7c3aed);color:#fff;border-bottom-right-radius:5px}
.gs-ai-typing{align-self:flex-end;display:none;gap:.25rem;padding:.6rem .8rem;background:linear-gradient(135deg,var(--gs-cp,#5b21b6),#7c3aed);border-radius:16px;border-bottom-right-radius:5px}
.gs-ai-typing.show{display:inline-flex}
.gs-ai-typing span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.85);animation:gsAiType 1.2s infinite}
.gs-ai-typing span:nth-child(2){animation-delay:.2s}.gs-ai-typing span:nth-child(3){animation-delay:.4s}
@keyframes gsAiType{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.gs-ai-chat.is-armed .gs-ai-msg{display:none}
.gs-ai-chat.is-armed .gs-ai-msg.shown{display:flex;animation:gsAiIn .45s cubic-bezier(.16,.84,.44,1)}
@keyframes gsAiIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.gs-ai-badge{position:absolute;display:inline-flex;align-items:center;gap:.4rem;background:var(--gs-surface-1,#fff);border:1px solid var(--gs-bd0,#e2e8f0);box-shadow:0 12px 30px -10px rgba(2,6,23,.28);border-radius:999px;padding:.42rem .75rem;font-size:.75rem;font-weight:700;color:var(--gs-text-primary);z-index:2}
.gs-ai-badge i{color:var(--gs-cp,#5b21b6)}
.gs-ai-badge-1{top:16%;left:-18px}
.gs-ai-badge-2{bottom:14%;right:-14px}
.gs-ai-sec.is-in .gs-ai-badge{animation:gsDbFloat 4.5s ease-in-out infinite}
@media(max-width:575.98px){.gs-ai-badge{display:none}.gs-ai-msg{max-width:90%}}
@media(prefers-reduced-motion:reduce){
  .gs-ai-sec [data-reveal]{opacity:1;transform:none;transition:none}
  .gs-ai-chat.is-armed .gs-ai-msg{display:flex;animation:none}
  .gs-ai-dot,.gs-ai-typing span,.gs-ai-sec.is-in .gs-ai-badge{animation:none}
}

/* ===== Homepage S06d — Order journey pipeline (chat → dashboard → customer), looped ===== */
.gs-flow-sec [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .7s cubic-bezier(.16,.84,.44,1);transition-delay:var(--d,0ms)}
.gs-flow-sec.is-in [data-reveal]{opacity:1;transform:none}
.gs-flow{display:flex;align-items:stretch;justify-content:center;gap:0;margin-top:2.5rem}
.gs-flow-step{flex:1 1 0;max-width:320px;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative}
.gs-flow-num{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem;background:var(--gs-cp-s,#f5f3ff);color:var(--gs-cp,#5b21b6);border:2px solid var(--gs-bd0,#e2e8f0);margin-bottom:1rem;transition:all .3s ease;z-index:2}
.gs-flow-step.is-on .gs-flow-num{background:linear-gradient(135deg,var(--gs-cp,#5b21b6),#7c3aed);color:#fff;border-color:transparent;box-shadow:0 6px 18px -4px rgba(91,33,182,.5);transform:scale(1.1)}
.gs-flow-card{width:100%;background:var(--gs-surface-1,#fff);border:1.5px solid var(--gs-bd0,#e2e8f0);border-radius:16px;padding:1.1rem;box-shadow:var(--gs-shadow-sm);transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;min-height:148px;text-align:left}
.gs-flow-step.is-on .gs-flow-card{border-color:var(--gs-cp,#5b21b6);transform:translateY(-6px);box-shadow:0 22px 44px -18px rgba(91,33,182,.45)}
.gs-flow-card-hd{display:flex;align-items:center;gap:.4rem;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--gs-tx2,#64748b);margin-bottom:.7rem}
.gs-flow-card-hd i{color:var(--gs-cp,#5b21b6)}
.gs-flow-bubble{display:inline-block;background:var(--gs-sf2,#f1f5f9);border-radius:14px;border-bottom-left-radius:5px;padding:.5rem .8rem;font-size:.85rem;color:var(--gs-text-primary);margin-bottom:.65rem}
.gs-flow-ok{display:flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:600;color:#16a34a;opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s ease}
.gs-flow-step.is-on .gs-flow-ok{opacity:1;transform:none}
.gs-flow-toast,.gs-flow-note{display:flex;align-items:center;gap:.6rem;background:var(--gs-surface-1,#fff);border:1px solid var(--gs-bd0,#e2e8f0);border-radius:12px;padding:.55rem .65rem;box-shadow:0 8px 22px -10px rgba(2,6,23,.2);opacity:0;transform:translateX(14px);transition:opacity .45s ease,transform .5s cubic-bezier(.16,.84,.44,1)}
.gs-flow-step.is-on .gs-flow-toast,.gs-flow-step.is-on .gs-flow-note{opacity:1;transform:none}
.gs-flow-note{margin-top:.55rem}
.gs-flow-step.is-on .gs-flow-push{transition-delay:.35s}
.gs-flow-toast .ic,.gs-flow-note .ic{flex:0 0 30px;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.85rem;background:linear-gradient(135deg,var(--gs-cp,#5b21b6),#7c3aed)}
.gs-flow-email .ic{background:linear-gradient(135deg,#0ea5e9,#2563eb)}
.gs-flow-push .ic{background:linear-gradient(135deg,#16a34a,#22c55e)}
.gs-flow-toast .bd,.gs-flow-note .bd{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.gs-flow-toast .bd strong,.gs-flow-note .bd strong{font-size:.8rem;color:var(--gs-text-primary)}
.gs-flow-toast .bd span,.gs-flow-note .bd span{font-size:.7rem;color:var(--gs-tx2,#64748b)}
.gs-flow-kpi{margin-top:.7rem;font-size:.78rem;color:var(--gs-tx2,#64748b)}
.gs-flow-kpi b{color:var(--gs-cp,#5b21b6);font-size:1rem}
.gs-flow-label{font-size:.82rem;font-weight:600;color:var(--gs-text-secondary);margin-top:.85rem}
.gs-flow-conn{flex:0 0 56px;align-self:flex-start;height:3px;background:var(--gs-bd0,#e2e8f0);border-radius:99px;margin-top:50px;position:relative;overflow:hidden}
.gs-flow-conn span{position:absolute;inset:0;width:0;background:linear-gradient(90deg,var(--gs-cp,#5b21b6),#7c3aed);border-radius:99px;transition:width .6s ease}
.gs-flow-conn.fill span{width:100%}
@media(max-width:767.98px){
  .gs-flow{flex-direction:column;align-items:center;gap:.25rem}
  .gs-flow-step{max-width:380px;width:100%}
  .gs-flow-conn{flex-basis:auto;width:3px;height:28px;margin:0}
  .gs-flow-conn span{inset:0;width:100%;height:0;transition:height .6s ease}
  .gs-flow-conn.fill span{height:100%;width:100%}
}
@media(prefers-reduced-motion:reduce){
  .gs-flow-sec [data-reveal]{opacity:1;transform:none;transition:none}
  .gs-flow-ok,.gs-flow-toast,.gs-flow-note{opacity:1;transform:none;transition:none}
  .gs-flow-conn span{transition:none}
}
.gs-flow-count{display:inline-block}
.gs-flow-step.is-on .gs-flow-count{animation:gsFlowPop .45s ease}
@keyframes gsFlowPop{0%{transform:scale(1)}45%{transform:scale(1.4);color:#16a34a}100%{transform:scale(1)}}

/* ===== Homepage S06e — Team & staff collaboration (gs-tmwk-*, brand-colored, looped) ===== */
.gs-tmwk-sec [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .7s cubic-bezier(.16,.84,.44,1);transition-delay:var(--d,0ms)}
.gs-tmwk-sec.is-in [data-reveal]{opacity:1;transform:none}
.gs-tmwk-org{display:flex;flex-direction:column;align-items:center}
.gs-tmwk-owner{display:flex;align-items:center;gap:.85rem;width:100%;background:linear-gradient(135deg,var(--gs-cp,#5b21b6),#7c3aed);color:#fff;border-radius:16px;padding:1rem 1.1rem;box-shadow:0 18px 40px -18px rgba(91,33,182,.55)}
.gs-tmwk-ava{flex:0 0 46px;width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.28);color:#fff}
.gs-tmwk-meta{display:flex;flex-direction:column;line-height:1.3;flex:1;min-width:0}
.gs-tmwk-meta strong{font-size:.98rem}
.gs-tmwk-meta span{font-size:.74rem;opacity:.85}
.gs-tmwk-tag{flex:0 0 auto;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;background:rgba(255,255,255,.2);border-radius:999px;padding:.25rem .6rem}
.gs-tmwk-trunk{position:relative;width:3px;height:34px;background:linear-gradient(var(--gs-cp,#5b21b6),var(--gs-bd0,#e2e8f0));overflow:hidden}
.gs-tmwk-trunk-2{height:30px}
.gs-tmwk-pulse{position:absolute;left:50%;top:-8px;width:8px;height:8px;border-radius:50%;background:var(--gs-cp,#5b21b6);transform:translateX(-50%)}
.gs-tmwk-sec.is-in .gs-tmwk-pulse{animation:gsTeamFlow 1.6s ease-in-out infinite}
@keyframes gsTeamFlow{0%{top:-8px;opacity:0}20%{opacity:1}100%{top:34px;opacity:0}}
.gs-tmwk-staff{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem;width:100%}
.gs-tmwk-card{display:flex;align-items:flex-start;gap:.8rem;text-align:left;background:var(--gs-surface-1,#fff);border:1px solid var(--gs-bd0,#e2e8f0);border-radius:14px;padding:1rem;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.gs-tmwk-card:hover{transform:translateY(-3px);border-color:var(--gs-cp,#5b21b6);box-shadow:0 16px 34px -18px rgba(91,33,182,.4)}
.gs-tmwk-ava.sm{flex:0 0 40px;width:40px;height:40px;border-radius:11px;font-size:1.1rem;background:var(--gs-cp-s,#f5f3ff);border:1px solid var(--gs-bd0,#e2e8f0);color:var(--gs-cp,#5b21b6)}
.gs-tmwk-cbody{display:flex;flex-direction:column;min-width:0}
.gs-tmwk-cname-row{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;margin-bottom:.3rem}
.gs-tmwk-name{font-size:.92rem;font-weight:700;color:var(--gs-text-primary)}
.gs-tmwk-role-pill{font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--gs-cp,#5b21b6);background:var(--gs-cp-s,#f5f3ff);border-radius:999px;padding:.12rem .45rem;white-space:nowrap}
.gs-tmwk-role-pill.alt{color:#15803d;background:rgba(34,197,94,.13)}
.gs-tmwk-can{font-size:.8rem;color:var(--gs-text-secondary);line-height:1.45}
.gs-tmwk-customer{display:flex;align-items:center;gap:.85rem;width:100%;background:var(--gs-cp-s,#f5f3ff);border:1.5px dashed var(--gs-cp,#5b21b6);border-radius:14px;padding:.95rem 1.05rem}
.gs-tmwk-ava.cust{flex:0 0 44px;width:44px;height:44px;border-radius:12px;font-size:1.25rem;background:#fff;border:1px solid var(--gs-bd0,#e2e8f0);color:var(--gs-cp,#5b21b6)}
.gs-tmwk-note{display:flex;align-items:center;gap:.45rem;font-size:.8rem;color:var(--gs-tx2,#64748b);margin:1.1rem 0 0}
.gs-tmwk-note i{color:var(--gs-cp,#5b21b6)}
.gs-tmwk-feed{background:var(--gs-surface-1,#fff);border:1px solid var(--gs-bd0,#e2e8f0);border-radius:18px;overflow:hidden;box-shadow:0 24px 54px -26px rgba(2,6,23,.3)}
.gs-tmwk-feed-hd{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.85rem 1.1rem;border-bottom:1px solid var(--gs-bd0,#e2e8f0);background:var(--gs-sf2,#f8fafc)}
.gs-tmwk-live{display:inline-flex;align-items:center;gap:.45rem;font-size:.82rem;font-weight:700;color:var(--gs-text-primary)}
.gs-tmwk-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.7);animation:gsAiPulse 2s infinite}
.gs-tmwk-feed-sub{font-size:.72rem;color:var(--gs-tx2,#64748b)}
.gs-tmwk-feed-body{padding:.85rem 1rem;display:flex;flex-direction:column;gap:.75rem;min-height:330px}
.gs-tmwk-act{display:flex;align-items:center;gap:.75rem}
.gs-tmwk-act-ic{flex:0 0 38px;width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:1rem;color:var(--gs-cp,#5b21b6);background:var(--gs-cp-s,#f5f3ff)}
.gs-tmwk-act-bd{display:flex;flex-direction:column;line-height:1.35;flex:1;min-width:0}
.gs-tmwk-act-who{font-size:.84rem;color:var(--gs-text-primary)}
.gs-tmwk-act-role{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--gs-cp,#5b21b6);background:var(--gs-cp-s,#f5f3ff);border-radius:999px;padding:.1rem .4rem;margin-left:.25rem}
.gs-tmwk-act-do{font-size:.78rem;color:var(--gs-text-secondary)}
.gs-tmwk-act-t{flex:0 0 auto;font-size:.7rem;color:var(--gs-tx3,#94a3b8)}
.gs-tmwk-feed.is-armed .gs-tmwk-act{display:none}
.gs-tmwk-feed.is-armed .gs-tmwk-act.shown{display:flex;animation:gsAiIn .45s cubic-bezier(.16,.84,.44,1)}
@media(max-width:575.98px){.gs-tmwk-staff{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  .gs-tmwk-sec [data-reveal]{opacity:1;transform:none;transition:none}
  .gs-tmwk-sec.is-in .gs-tmwk-pulse,.gs-tmwk-dot{animation:none}
  .gs-tmwk-feed.is-armed .gs-tmwk-act{display:flex;animation:none}
}

/* ===== Homepage S06f — Dashboard power tools (⌘K command palette demo) ===== */
.gs-cmd-sec [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .7s cubic-bezier(.16,.84,.44,1);transition-delay:var(--d,0ms)}
.gs-cmd-sec.is-in [data-reveal]{opacity:1;transform:none}
.gs-kbd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.66rem;font-weight:700;color:var(--gs-tx2,#64748b);background:var(--gs-sf2,#f1f5f9);border:1px solid var(--gs-bd0,#e2e8f0);border-bottom-width:2px;border-radius:6px;padding:.12rem .42rem;white-space:nowrap;line-height:1}
.gs-cmd-feats{list-style:none;margin:1.5rem 0 0;padding:0;display:flex;flex-direction:column;gap:.85rem}
.gs-cmd-feats li{display:flex;align-items:center;gap:.85rem;background:var(--gs-surface-1,#fff);border:1px solid var(--gs-bd0,#e2e8f0);border-radius:13px;padding:.8rem .9rem;transition:border-color .2s ease,transform .2s ease}
.gs-cmd-feats li:hover{border-color:var(--gs-cp,#5b21b6);transform:translateX(2px)}
.gs-cmd-ficon{flex:0 0 40px;width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:var(--gs-cp,#5b21b6);background:var(--gs-cp-s,#f5f3ff)}
.gs-cmd-ftext{display:flex;flex-direction:column;line-height:1.4;flex:1;min-width:0}
.gs-cmd-ftext strong{font-size:.9rem;color:var(--gs-text-primary)}
.gs-cmd-ftext span{font-size:.8rem;color:var(--gs-text-secondary)}
.gs-cmd{background:var(--gs-surface-1,#fff);border:1px solid var(--gs-bd0,#e2e8f0);border-radius:18px;overflow:hidden;box-shadow:0 28px 60px -26px rgba(91,33,182,.45)}
.gs-cmd-bar{display:flex;align-items:center;gap:.5rem;padding:.95rem 1.1rem;border-bottom:1px solid var(--gs-bd0,#e2e8f0);font-size:.95rem;color:var(--gs-text-primary)}
.gs-cmd-bar > .bi-search{color:var(--gs-cp,#5b21b6);font-size:1.05rem}
.gs-cmd-typed{min-height:1em;color:var(--gs-text-primary)}
.gs-cmd-caret{display:inline-block;width:2px;height:1.05em;background:var(--gs-cp,#5b21b6);margin-left:1px;vertical-align:-2px;animation:gsCmdCaret 1s steps(1) infinite}
@keyframes gsCmdCaret{50%{opacity:0}}
.gs-kbd-r{margin-left:auto}
.gs-cmd-acts{display:flex;align-items:center;gap:.5rem;padding:.7rem 1.1rem;border-bottom:1px solid var(--gs-bd0,#e2e8f0);background:var(--gs-sf2,#f8fafc)}
.gs-cmd-btn{display:inline-flex;align-items:center;gap:.35rem;font-size:.78rem;font-weight:600;border-radius:9px;padding:.4rem .7rem;background:linear-gradient(135deg,var(--gs-cp,#5b21b6),#7c3aed);color:#fff}
.gs-cmd-btn.ghost{background:var(--gs-surface-1,#fff);border:1px solid var(--gs-bd0,#e2e8f0);color:var(--gs-tx2,#64748b)}
.gs-cmd-acts .gs-cmd-btn.ghost:last-child,.gs-cmd-acts .gs-cmd-btn.ghost:nth-last-child(2){margin-left:0}
.gs-cmd-acts .ghost:last-child{margin-left:auto}
.gs-cmd-panel{padding:.6rem .65rem .8rem}
.gs-cmd-group{font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--gs-tx3,#94a3b8);padding:.5rem .6rem .3rem}
.gs-cmd-row{display:flex;align-items:center;gap:.65rem;padding:.55rem .65rem;border-radius:10px;font-size:.86rem;color:var(--gs-text-primary);border-left:3px solid transparent;transition:background .2s ease,border-color .2s ease}
.gs-cmd-row .ic{flex:0 0 30px;width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.9rem;color:var(--gs-cp,#5b21b6);background:var(--gs-cp-s,#f5f3ff)}
.gs-cmd-row .lb{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gs-cmd-row .gs-kbd{margin-left:auto}
.gs-cmd-row.is-active{background:var(--gs-cp-s,#f5f3ff);border-left-color:var(--gs-cp,#5b21b6)}
.gs-cmd-row.is-active .ic{background:linear-gradient(135deg,var(--gs-cp,#5b21b6),#7c3aed);color:#fff}
@media(prefers-reduced-motion:reduce){
  .gs-cmd-sec [data-reveal]{opacity:1;transform:none;transition:none}
  .gs-cmd-caret{animation:none}
}

/* ===== Homepage S11 — Testimonials (real reviews, refined; armed only when JS animates) ===== */
.gs-testi-sec.is-armed [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .7s cubic-bezier(.16,.84,.44,1);transition-delay:var(--d,0ms)}
.gs-testi-sec.is-armed.is-in [data-reveal]{opacity:1;transform:none}
.gs-testi-sec .gs-testi{border-radius:18px;padding:1.75rem;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.gs-testi-sec .gs-testi:hover{transform:translateY(-5px);border-color:var(--gs-cp,#5b21b6);box-shadow:0 24px 50px -22px rgba(91,33,182,.4)}
.gs-testi-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.4rem}
.gs-testi-sec .gs-testi-stars{margin-bottom:0}
.gs-testi-sec .gs-testi-stars i.off{color:var(--gs-bd0,#e2e8f0)}
.gs-testi-verified{display:inline-flex;align-items:center;gap:.3rem;font-size:.68rem;font-weight:700;color:#15803d;background:rgba(34,197,94,.12);border-radius:999px;padding:.18rem .5rem;white-space:nowrap}
blockquote.gs-testi-quote{margin:0 0 1.25rem}
.gs-testi-ava{flex:0 0 46px;width:46px;height:46px;border-radius:50%;object-fit:cover;border:1px solid var(--gs-bd0,#e2e8f0)}
.gs-testi-ava-i{display:flex;align-items:center;justify-content:center;font-family:var(--gs-font-display,inherit);font-weight:800;font-size:.95rem;color:#fff;background:linear-gradient(135deg,var(--gs-cp,#5b21b6),#7c3aed);border:0}
.gs-testi-id{display:flex;flex-direction:column;min-width:0}
@media(prefers-reduced-motion:reduce){.gs-testi-sec.is-armed [data-reveal]{opacity:1;transform:none;transition:none}}

/* ===== Homepage S11 — Testimonials sliding marquee (auto-scroll, hover-pause) ===== */
.gs-testi-marquee{position:relative;overflow:hidden;padding:.5rem 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.gs-testi-track{display:flex;align-items:stretch;gap:1.5rem;width:max-content;animation:gsTestiSlide 48s linear infinite}
.gs-testi-marquee:hover .gs-testi-track{animation-play-state:paused}
@keyframes gsTestiSlide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.gs-testi-marquee .gs-testi{flex:0 0 360px;width:360px}
@media(max-width:575.98px){.gs-testi-marquee .gs-testi{flex-basis:300px;width:300px}.gs-testi-track{animation-duration:36s}}
@media(prefers-reduced-motion:reduce){
  .gs-testi-track{animation:none;width:auto;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.5rem}
  .gs-testi-marquee{-webkit-mask-image:none;mask-image:none}
  .gs-testi-marquee .gs-testi{scroll-snap-align:start}
}

/* ===== Homepage S10 — Developer API workflow (dark section + animated terminal) ===== */
.gs-api-sec.is-armed [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .7s cubic-bezier(.16,.84,.44,1);transition-delay:var(--d,0ms)}
.gs-api-sec.is-armed.is-in [data-reveal]{opacity:1;transform:none}
.gs-api-eyebrow{color:#c4b5fd}
.gs-api-sub{font-size:1rem;line-height:1.7;color:rgba(255,255,255,.78);margin:0 0 1.6rem}
.gs-api-feats{list-style:none;margin:0 0 1.6rem;padding:0;display:flex;flex-direction:column;gap:1rem}
.gs-api-feats li{display:flex;gap:.85rem;align-items:flex-start}
.gs-api-ficon{flex:0 0 42px;width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:#c4b5fd;background:rgba(124,58,237,.22);border:1px solid rgba(196,181,253,.25)}
.gs-api-ftext{display:flex;flex-direction:column;line-height:1.45}
.gs-api-ftext strong{font-size:.95rem;color:#fff}
.gs-api-ftext span{font-size:.85rem;color:rgba(255,255,255,.62)}
.gs-api-term{background:#0b1020;border:1px solid rgba(167,139,250,.22);border-radius:16px;overflow:hidden;box-shadow:0 30px 70px -30px rgba(0,0,0,.7),0 0 70px -24px rgba(124,58,237,.5);height:100%;display:flex;flex-direction:column}
.gs-api-term-hd{flex:0 0 auto}
.gs-api-term-hd{display:flex;align-items:center;gap:.6rem;padding:.7rem 1rem;background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.08)}
.gs-api-dots{display:flex;gap:.4rem}
.gs-api-dots i{width:11px;height:11px;border-radius:50%;background:#475569}
.gs-api-dots i:nth-child(1){background:#ff5f57}.gs-api-dots i:nth-child(2){background:#febc2e}.gs-api-dots i:nth-child(3){background:#28c840}
.gs-api-term-title{font-size:.75rem;color:rgba(255,255,255,.55);font-family:ui-monospace,Menlo,monospace}
.gs-api-method{margin-left:auto;font-size:.62rem;font-weight:700;letter-spacing:.05em;color:#a78bfa;background:rgba(124,58,237,.25);border-radius:6px;padding:.15rem .45rem}
.gs-api-term-body{padding:1.1rem 1.2rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem;line-height:1.5;color:#cbd5e1;white-space:normal;overflow-x:auto;flex:1 1 auto;display:flex;flex-direction:column}
.gs-api-out{flex:0 0 auto}
.gs-api-line{white-space:nowrap;padding:.06rem 0}
.gs-api-codes{margin-top:auto;display:flex;flex-wrap:wrap;gap:.5rem;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.08)}
.gs-api-code{display:inline-flex;align-items:center;gap:.35rem;font-size:.72rem;font-weight:600;border-radius:8px;padding:.32rem .6rem;border:1px solid transparent;white-space:nowrap}
.gs-api-code.ok{color:#4ade80;background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.28)}
.gs-api-code.err{color:#f87171;background:rgba(248,113,113,.1);border-color:rgba(248,113,113,.26)}
.gs-api-code.warn{color:#fbbf24;background:rgba(251,191,36,.1);border-color:rgba(251,191,36,.26)}
.t-prompt{color:#a78bfa;font-weight:700}
.t-str{color:#86efac}.t-key{color:#7dd3fc}.t-num{color:#fdba74}.t-pun{color:#94a3b8}.t-dim{color:#64748b}
.t-ok{color:#22c55e;font-weight:700;background:rgba(34,197,94,.14);border-radius:5px;padding:.05rem .4rem}
.gs-api-caret{display:inline-block;width:8px;height:1em;background:#a78bfa;margin-left:3px;vertical-align:-2px;animation:gsCmdCaret 1s steps(1) infinite}
.gs-api-sec.is-armed .gs-api-line{opacity:0;transform:translateY(4px);transition:opacity .3s ease,transform .3s ease}
.gs-api-sec.is-armed .gs-api-line.shown{opacity:1;transform:none}
@media(max-width:575.98px){.gs-api-term-body{font-size:.74rem}}
@media(prefers-reduced-motion:reduce){
  .gs-api-sec.is-armed [data-reveal]{opacity:1;transform:none;transition:none}
  .gs-api-sec.is-armed .gs-api-line{opacity:1;transform:none}
  .gs-api-caret{animation:none}
}

/* ===== Hero dashboard mock — animated "live" presentation (scoped, wow) ===== */
.gs-hero-visual .gs-dash-card{box-shadow:0 24px 50px -18px rgba(91,33,182,.28),0 0 60px -26px rgba(124,58,237,.45);transition:box-shadow .3s ease}
.gs-hero-visual.is-live .gs-dash-card{animation:gsHeroFloat 7s ease-in-out infinite}
@keyframes gsHeroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.gs-hero-visual.is-live .gs-float-badge{animation:gsDbFloat 5s ease-in-out infinite}
.gs-hero-visual.is-live .gs-float-2{animation-delay:-2.5s}
.gs-hero-visual.is-live .gs-dash-titlebar-badge{position:relative;animation:gsHeroLive 2s ease-in-out infinite}
@keyframes gsHeroLive{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}55%{box-shadow:0 0 0 6px rgba(34,197,94,0)}}
.gs-hero-visual .gs-dash-stat{transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
.gs-hero-visual.is-live .gs-dash-stat:hover{transform:translateY(-3px);border-color:var(--gs-cp,#5b21b6)}
/* tool rows: armed reveal + cycling focus highlight (draws the eye to the tools) */
.gs-hero-visual.is-armed .gs-dash-tool-item{opacity:0;transform:translateX(14px)}
.gs-hero-visual.is-armed .gs-dash-tool-item.in{opacity:1;transform:none;transition:opacity .5s ease,transform .5s cubic-bezier(.16,.84,.44,1)}
.gs-dash-tool-item{transition:background .35s ease,transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.gs-dash-tool-item.is-focus{background:var(--gs-cp-s,#f5f3ff);border-color:var(--gs-cp,#5b21b6);transform:scale(1.035);box-shadow:0 12px 26px -10px rgba(91,33,182,.4);position:relative;z-index:1}
.gs-dash-tool-item.is-focus .gs-dash-tool-name{color:var(--gs-cp,#5b21b6)}
.gs-dash-tool-item.is-focus .gs-dash-tool-logo{transform:scale(1.08)}
.gs-dash-tool-logo{transition:transform .35s ease}
.gs-dash-cat-chip{transition:background .35s ease,color .35s ease,transform .35s ease}
.gs-dash-cat-chip.active{transform:translateY(-1px)}
@media(prefers-reduced-motion:reduce){
  .gs-hero-visual.is-live .gs-dash-card,.gs-hero-visual.is-live .gs-float-badge,.gs-hero-visual.is-live .gs-dash-titlebar-badge{animation:none}
  .gs-hero-visual.is-armed .gs-dash-tool-item{opacity:1;transform:none}
  .gs-dash-tool-item.is-focus{transform:none}
}

/* Hero mock — 5-tool sliding strip (viewport shows 3) + one-line scrolling chips */
.gs-dash-tool-vp{overflow:hidden;margin-bottom:1rem}
.gs-dash-tool-vp .gs-dash-tool-row{margin-bottom:0;transition:transform .55s cubic-bezier(.16,.84,.44,1)}
.gs-dash-cats{display:flex;flex-wrap:nowrap;gap:.4rem;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.gs-dash-cats::-webkit-scrollbar{display:none}
.gs-dash-cat-chip{flex:0 0 auto;white-space:nowrap}

.gs-tool-logo-img{width:100%;height:100%;object-fit:contain}

/* Mega-menu Featured — modern, eye-catching tool rows + best-seller highlight */
.gs-mega-featured .gs-mega-tool-item{position:relative;display:flex;align-items:center;gap:.65rem;padding:.5rem .6rem;border-radius:11px;text-decoration:none;transition:background .2s ease,transform .2s ease,box-shadow .2s ease}
.gs-mega-featured .gs-mega-tool-item:hover{background:var(--gs-cp-s,#f5f3ff);transform:translateX(3px);box-shadow:0 12px 26px -16px rgba(91,33,182,.55)}
.gs-mega-featured .gs-mega-tool-logo{flex:0 0 38px;width:38px;height:38px;border-radius:10px;background:var(--gs-cp-s,#f5f3ff);color:var(--gs-cp,#5b21b6);font-size:1.05rem;border:1px solid var(--gs-bd0,#e2e8f0);transition:transform .2s ease,background .2s ease,color .2s ease}
.gs-mega-featured .gs-mega-tool-item:hover .gs-mega-tool-logo{background:linear-gradient(135deg,var(--gs-cp,#5b21b6),#7c3aed);color:#fff;transform:scale(1.08) rotate(-3deg);border-color:transparent}
.gs-mega-tool-info{flex:1;min-width:0;display:flex;flex-direction:column}
.gs-mega-tool-name{font-weight:700;font-size:.875rem;color:var(--gs-tx0,#111827);display:flex;align-items:center;gap:.4rem;line-height:1.2}
.gs-mega-featured .gs-mega-tool-item:hover .gs-mega-tool-name{color:var(--gs-cp,#5b21b6)}
.gs-mega-tool-cat{font-size:.72rem;color:var(--gs-tx2,#64748b);margin-top:1px}
.gs-mega-tool-arrow{margin-left:auto;font-size:.72rem;color:var(--gs-cp,#5b21b6);opacity:0;transform:translateX(-5px);transition:opacity .2s ease,transform .2s ease}
.gs-mega-featured .gs-mega-tool-item:hover .gs-mega-tool-arrow{opacity:1;transform:none}
.gs-mega-tool-badge{display:inline-flex;align-items:center;gap:.2rem;font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:#fff;background:linear-gradient(135deg,#f59e0b,#ef4444);border-radius:999px;padding:.08rem .42rem;white-space:nowrap}
.gs-mega-tool-top{background:linear-gradient(135deg,var(--gs-cp-s,#f5f3ff),transparent 80%);box-shadow:inset 3px 0 0 0 var(--gs-cp,#5b21b6)}
.gs-mega-tool-top .gs-mega-tool-logo{background:linear-gradient(135deg,var(--gs-cp,#5b21b6),#7c3aed);color:#fff;border-color:transparent}

/* Mega-menu Featured — roomier spacing + more professional finish */
.gs-mega-featured{width:18.5rem;display:flex;flex-direction:column;gap:.45rem;padding:1.4rem 1.15rem}
.gs-mega-featured-title{margin:0 0 .3rem;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--gs-tx2,#64748b);display:flex;align-items:center;gap:.4rem}
.gs-mega-featured-title .bi{color:var(--gs-cp,#5b21b6)}
.gs-mega-featured .gs-mega-tool-item{padding:.62rem .7rem;margin:0}
.gs-mega-featured .gs-mega-tool-logo{flex:0 0 40px;width:40px;height:40px}
.gs-mega-featured .gs-mega-browse-all{margin:.4rem 0 0;padding:.95rem .25rem 0;border-top:1px solid var(--gs-bd0,#e2e8f0);font-weight:700}

/* Compare builder — custom autocomplete dropdown (cross-excludes already-picked tools) */
.cmp-tool-input-wrap{position:relative}
.cmp-ac{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;background:var(--gs-sf0,#fff);border:1px solid var(--gs-bd0,#e2e8f0);border-radius:var(--gs-rmd,12px);box-shadow:0 18px 40px -18px rgba(15,23,42,.45);padding:.35rem;max-height:18rem;overflow-y:auto}
.cmp-ac-item{display:block;width:100%;text-align:left;border:0;background:transparent;padding:.55rem .7rem;border-radius:9px;font-size:.9rem;color:var(--gs-tx0,#111827);cursor:pointer;transition:background .15s ease,color .15s ease}
.cmp-ac-item:hover,.cmp-ac-item:focus{background:var(--gs-cp-s,#f5f3ff);color:var(--gs-cp,#5b21b6);outline:none}
.cmp-ac-item b{color:var(--gs-cp,#5b21b6);font-weight:700}

/* Compare table — richer, more professional rows (tool header, pricing-model pills, feature list) */
.cmp-th-tool{padding-top:1rem !important;padding-bottom:1rem !important}
.cmp-th-logo{display:flex;align-items:center;justify-content:center;width:46px;height:46px;margin:0 auto .55rem;border-radius:12px;background:var(--gs-cp-s,#f5f3ff);color:var(--gs-cp,#5b21b6);font-size:1.3rem;border:1px solid var(--gs-bd0,#e2e8f0);overflow:hidden}
.cmp-th-name{display:block;font-weight:800;font-size:1rem;color:var(--gs-tx0,#111827);text-decoration:none;line-height:1.25}
.cmp-th-name:hover{color:var(--gs-cp,#5b21b6)}
.cmp-th-cat{display:block;font-size:.72rem;color:var(--gs-tx2,#64748b);margin-top:.15rem}
.cmp-th-remove{display:inline-flex;align-items:center;gap:.25rem;margin-top:.55rem;font-size:.7rem;font-weight:600;color:var(--gs-tx2,#94a3b8);text-decoration:none}
.cmp-th-remove:hover{color:#ef4444}
.cmp-pm{display:inline-block;font-size:.75rem;font-weight:700;padding:.22rem .65rem;border-radius:999px;letter-spacing:.01em}
.cmp-pm-free{background:rgba(22,163,74,.12);color:#15803d}
.cmp-pm-freemium{background:rgba(37,99,235,.12);color:#1d4ed8}
.cmp-pm-paid{background:var(--gs-cp-s,#f5f3ff);color:var(--gs-cp,#5b21b6)}
.cmp-pm-ent{background:rgba(217,119,6,.14);color:#b45309}
.cmp-muted{color:var(--gs-tx2,#94a3b8);font-weight:500}
.cmp-feat-list{list-style:none;margin:0;padding:0;text-align:left;display:inline-block}
.cmp-feat-list li{display:flex;align-items:flex-start;gap:.4rem;font-size:.8125rem;color:var(--gs-tx1,#334155);padding:.18rem 0;line-height:1.4}
.cmp-feat-list li .cmp-check-yes{font-size:.9rem;margin-top:.1rem;flex-shrink:0}

/* ===== All Tools listing — modern hero + filter toolbar + empty state ===== */
.tools-hero{position:relative;overflow:hidden;padding:2.75rem 0 2.25rem;background:linear-gradient(180deg,var(--gs-cp-s,#f5f3ff) 0%,transparent 100%)}
.tools-hero-blob{position:absolute;top:-40%;right:-10%;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(124,58,237,.16),transparent 70%);pointer-events:none}
.tools-hero-eyebrow{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--gs-cp,#5b21b6);background:#fff;border:1px solid var(--gs-bd0,#e2e8f0);border-radius:999px;padding:.32rem .8rem;box-shadow:var(--gs-sh-sm,0 1px 2px rgba(15,23,42,.06))}
.tools-hero-h1{font-family:var(--gs-fd);font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:800;letter-spacing:-.03em;color:var(--gs-tx0,#111827);margin:.9rem 0 .5rem}
.tools-hero-lead{font-size:1.05rem;color:var(--gs-tx1,#475569);line-height:1.6;max-width:640px;margin:0}
.tools-hero-stats{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.tools-stat{display:flex;flex-direction:column;gap:.1rem;background:#fff;border:1px solid var(--gs-bd0,#e2e8f0);border-radius:14px;padding:.7rem 1.1rem;min-width:7rem;box-shadow:var(--gs-sh-sm,0 1px 2px rgba(15,23,42,.05))}
.tools-stat-num{font-family:var(--gs-fd);font-size:1.35rem;font-weight:800;color:var(--gs-cp,#5b21b6);line-height:1;display:flex;align-items:center;gap:.25rem}
.tools-stat-num .bi{font-size:.85rem;color:#f59e0b}
.tools-stat-lbl{font-size:.74rem;color:var(--gs-tx2,#64748b);font-weight:600}

.tools-filter-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;background:var(--gs-sf0,#fff);border:1px solid var(--gs-bd0,#e2e8f0);border-radius:14px;padding:.85rem 1.1rem;margin:1.5rem 0;box-shadow:var(--gs-sh-sm,0 1px 2px rgba(15,23,42,.05))}
.tools-filter-count{font-size:.95rem;color:var(--gs-tx1,#475569)}
.tools-filter-count strong{color:var(--gs-tx0,#111827);font-size:1.05rem}
.tools-filter-controls{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem}
.tools-select-wrap{position:relative;margin:0}
.tools-select{appearance:none;-webkit-appearance:none;background:var(--gs-sf1,#f8fafc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 5.6 8 10.4l4.8-4.8'/%3E%3C/svg%3E") no-repeat right .7rem center;border:1px solid var(--gs-bd0,#e2e8f0);border-radius:10px;padding:.55rem 2rem .55rem .85rem;font-size:.875rem;font-weight:600;color:var(--gs-tx0,#111827);cursor:pointer;transition:border-color .15s,box-shadow .15s}
.tools-select:hover{border-color:var(--gs-cp,#5b21b6)}
.tools-select:focus{outline:none;border-color:var(--gs-cp,#5b21b6);box-shadow:0 0 0 3px var(--gs-cp-s,#ede9fe)}
.tools-clear{display:inline-flex;align-items:center;gap:.3rem;font-size:.82rem;font-weight:600;color:var(--gs-tx2,#64748b);text-decoration:none;padding:.5rem .4rem}
.tools-clear:hover{color:#ef4444}

.tools-empty{text-align:center;padding:3.5rem 1.5rem;background:var(--gs-sf0,#fff);border:1px dashed var(--gs-bd0,#e2e8f0);border-radius:18px}
.tools-empty-icon{font-size:2.5rem;color:var(--gs-cp,#5b21b6);opacity:.5}
.tools-empty-title{font-family:var(--gs-fd);font-size:1.25rem;font-weight:700;color:var(--gs-tx0,#111827);margin:.75rem 0 .25rem}
.tools-empty-sub{color:var(--gs-tx2,#64748b);margin-bottom:1rem}
@media(max-width:575.98px){.tools-filter-bar{flex-direction:column;align-items:stretch}.tools-filter-controls{justify-content:space-between}.tools-select{flex:1}}

/* Curated listings — ranked cards + sorted-by pill */
.gs-card-tool-rank{flex-shrink:0;align-self:flex-start;min-width:2rem;height:2rem;padding:0 .5rem;display:inline-flex;align-items:center;justify-content:center;font-family:var(--gs-fd);font-weight:800;font-size:.85rem;line-height:1;color:var(--gs-tx2,#64748b);background:var(--gs-sf1,#f1f5f9);border:1px solid var(--gs-bd0,#e2e8f0);border-radius:9px;box-shadow:var(--gs-sh-sm,0 1px 2px rgba(15,23,42,.08))}
.gs-card-tool-rank-top{color:#fff;background:linear-gradient(135deg,var(--gs-cp,#5b21b6),#7c3aed);border-color:transparent;box-shadow:0 6px 16px -8px rgba(91,33,182,.6)}
.tools-listing-bar{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;margin:1.5rem 0}
.tools-sort-pill{display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;font-weight:700;color:var(--gs-cp,#5b21b6);background:var(--gs-cp-s,#f5f3ff);border:1px solid var(--gs-bd0,#e2e8f0);border-radius:999px;padding:.28rem .75rem}

/* About — team member photo (matches the avatar circle) */
.gs-team-photo{width:96px;height:96px;border-radius:50%;object-fit:cover;display:block;margin:0 auto 1.125rem;border:3px solid var(--gs-sf0,#fff);box-shadow:0 6px 18px -8px rgba(91,33,182,.45),0 0 0 1px var(--gs-bd0,#e2e8f0)}

/* Pricing — "+N more features" overflow link (jumps to the compare table) */
.gs-plan-more{display:inline-flex;align-items:center;gap:.35rem;margin-top:.55rem;font-size:.82rem;font-weight:700;color:var(--gs-cp,#5b21b6);text-decoration:none;align-self:flex-start}
.gs-plan-more:hover{text-decoration:underline;color:var(--gs-cp-d,#4c1d95)}
.gs-sec[id="compare"]{scroll-margin-top:90px}

/* ===================== DOMAIN landing (/domain) — DOMAIN-01A ===================== */
.dom-hero{position:relative;overflow:hidden;padding:3.5rem 0 3rem;background:linear-gradient(180deg,var(--gs-cp-s,#f5f3ff) 0%,transparent 100%)}
.dom-hero-blob{position:absolute;border-radius:50%;pointer-events:none;filter:blur(8px);opacity:.5}
.dom-hero-blob-1{top:-30%;left:-6%;width:380px;height:380px;background:radial-gradient(circle,rgba(124,58,237,.16),transparent 70%)}
.dom-hero-blob-2{bottom:-40%;right:-6%;width:420px;height:420px;background:radial-gradient(circle,rgba(61,139,55,.14),transparent 70%)}
.dom-hero-inner{max-width:760px;margin:0 auto}
.dom-h1{font-family:var(--gs-fd);font-size:clamp(2rem,4.5vw,3rem);font-weight:800;letter-spacing:-.03em;line-height:1.12;color:var(--gs-tx0,#111827);margin:1rem 0 .75rem}
.dom-h1 .acc{color:var(--gs-cp,#5b21b6)}
.dom-lead{font-size:1.0625rem;color:var(--gs-tx1,#475569);line-height:1.6;max-width:620px;margin:0 auto 1.75rem}
.dom-search{max-width:680px;margin:0 auto}
.dom-chips,.dom-suggest{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem}
.dom-chips-label{font-size:.8rem;font-weight:700;color:var(--gs-tx2,#64748b)}
.dom-suggest-btn{font-size:.82rem;font-weight:600;color:var(--gs-cp,#5b21b6);background:none;border:1px dashed var(--gs-bd1,#cbd5e1);border-radius:999px;padding:.3rem .8rem;cursor:pointer;transition:background .15s,border-color .15s}
.dom-suggest-btn:hover{background:var(--gs-cp-s,#f5f3ff);border-color:var(--gs-cp,#5b21b6)}
.dom-results-hd{margin-bottom:1.5rem}
.dom-result-list{display:flex;flex-direction:column;gap:.85rem;max-width:780px;margin:0 auto}
.dom-result-card{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;background:var(--gs-sf0,#fff);border:1px solid var(--gs-bd0,#e2e8f0);border-radius:14px;padding:1rem 1.25rem;transition:box-shadow .2s,border-color .2s}
.dom-result-card:hover{box-shadow:0 14px 30px -18px rgba(15,23,42,.4);border-color:var(--gs-cp-b,#c4b5fd)}
.dom-result-card.is-unavail{opacity:.72}
.dom-result-main{display:flex;align-items:center;gap:.7rem;min-width:0}
.dom-result-ico .bi{font-size:1.25rem}
.dom-result-card .dom-result-ico .bi-check-circle-fill{color:var(--gs-cs,#16a34a)}
.dom-result-card .dom-result-ico .bi-x-circle-fill{color:#ef4444}
.dom-result-name{font-family:var(--gs-fd);font-weight:700;font-size:1.0625rem;color:var(--gs-tx0,#111827);word-break:break-all}
.dom-result-badge{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:.18rem .55rem;border-radius:999px}
.dom-result-badge.ok{background:rgba(22,163,74,.12);color:#15803d}
.dom-result-badge.no{background:rgba(148,163,184,.18);color:#64748b}
.dom-result-end{display:flex;align-items:center;gap:1rem}
.dom-result-price{font-family:var(--gs-fd);font-weight:800;color:var(--gs-tx0,#111827)}
.dom-result-price small{font-weight:500;color:var(--gs-tx2,#94a3b8)}
.dom-result-price.muted{color:var(--gs-tx2,#94a3b8);font-weight:600}
.dom-icard{padding:1.6rem}
.dom-icard-ico{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:13px;background:var(--gs-cp-s,#f5f3ff);color:var(--gs-cp,#5b21b6);font-size:1.4rem;margin-bottom:.9rem}
.dom-icard-title{font-family:var(--gs-fd);font-size:1.0625rem;font-weight:700;color:var(--gs-tx0,#111827);margin:0 0 .4rem}
.dom-icard-desc{font-size:.9rem;color:var(--gs-tx1,#475569);line-height:1.55;margin:0}
.dom-tld-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem}
.dom-tld-card{display:flex;flex-direction:column;gap:.2rem;background:var(--gs-sf0,#fff);border:1px solid var(--gs-bd0,#e2e8f0);border-radius:14px;padding:1.25rem;text-decoration:none;transition:transform .18s,box-shadow .18s,border-color .18s}
.dom-tld-card:hover{transform:translateY(-3px);box-shadow:0 16px 32px -18px rgba(91,33,182,.5);border-color:var(--gs-cp-b,#c4b5fd)}
.dom-tld-name{font-family:var(--gs-fd);font-size:1.5rem;font-weight:800;color:var(--gs-cp,#5b21b6);line-height:1}
.dom-tld-use{font-size:.82rem;color:var(--gs-tx2,#64748b);margin-bottom:.5rem}
.dom-tld-price{font-size:.8rem;color:var(--gs-tx1,#475569)}
.dom-tld-price .from{display:block;font-size:.68rem;color:var(--gs-tx2,#94a3b8)}
.dom-tld-price strong{font-family:var(--gs-fd);font-size:1.05rem;color:var(--gs-tx0,#111827)}
.dom-tld-price small{color:var(--gs-tx2,#94a3b8)}
.dom-feature{padding:1.4rem;text-align:center}
.dom-feature-ico{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:var(--gs-cp-s,#f5f3ff);color:var(--gs-cp,#5b21b6);font-size:1.3rem;margin-bottom:.75rem}
.dom-feature-title{font-family:var(--gs-fd);font-size:1rem;font-weight:700;color:var(--gs-tx0,#111827);margin:0 0 .35rem}
.dom-feature-desc{font-size:.85rem;color:var(--gs-tx1,#475569);line-height:1.5;margin:0}
.dom-transfer{display:grid;grid-template-columns:1.2fr .8fr;gap:2.5rem;align-items:center;background:linear-gradient(135deg,#1a0b3d 0%,#2e1065 55%,#0c2a14 100%);border-radius:24px;padding:2.5rem;color:#fff}
.dom-transfer-h2{font-family:var(--gs-fd);font-size:clamp(1.5rem,3vw,2rem);font-weight:800;letter-spacing:-.02em;color:#fff;margin:.25rem 0 .75rem}
.dom-transfer-sub{color:rgba(255,255,255,.8);line-height:1.6;margin-bottom:1.5rem}
.dom-transfer-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.85rem}
.dom-transfer-steps li{display:flex;align-items:center;gap:.75rem;font-size:.9rem;color:rgba(255,255,255,.92);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:.7rem .9rem}
.dom-transfer-steps .n{flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:#fff;color:#2e1065;font-family:var(--gs-fd);font-weight:800;font-size:.8rem;display:flex;align-items:center;justify-content:center}
.dom-price-wrap{overflow-x:auto;border:1px solid var(--gs-bd0,#e2e8f0);border-radius:16px;background:var(--gs-sf0,#fff)}
.dom-price-table{width:100%;border-collapse:collapse;min-width:560px}
.dom-price-table th,.dom-price-table td{text-align:left;padding:.9rem 1.1rem;border-bottom:1px solid var(--gs-bd0,#e2e8f0);font-size:.92rem;color:var(--gs-tx1,#475569)}
.dom-price-table thead th{font-family:var(--gs-fd);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--gs-tx2,#64748b);background:var(--gs-sf1,#f8fafc)}
.dom-price-table tbody tr:last-child td{border-bottom:0}
.dom-price-table tbody tr:hover{background:var(--gs-cp-s,#f5f3ff)}
.dom-price-table small{color:var(--gs-tx2,#94a3b8)}
.dom-price-tld{font-family:var(--gs-fd);font-size:1.05rem;color:var(--gs-cp,#5b21b6)}
.dom-th-act{text-align:right}
.dom-cta{position:relative;overflow:hidden;text-align:center;padding:4rem 0;background:linear-gradient(135deg,#1a0b3d 0%,#2e1065 55%,#0c2a14 100%);color:#fff}
.dom-cta-blob{position:absolute;top:-50%;left:50%;transform:translateX(-50%);width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(124,58,237,.35),transparent 65%);pointer-events:none}
.dom-cta-h2{font-family:var(--gs-fd);font-size:clamp(1.75rem,3.5vw,2.5rem);font-weight:800;letter-spacing:-.03em;color:#fff;margin:0 0 .6rem}
.dom-cta-sub{color:rgba(255,255,255,.82);font-size:1.05rem;max-width:520px;margin:0 auto 1.75rem}
@media(max-width:767.98px){
  .dom-transfer{grid-template-columns:1fr;gap:1.75rem;padding:1.75rem}
  .dom-result-card{flex-direction:column;align-items:flex-start}
  .dom-result-end{width:100%;justify-content:space-between}
}
@media(max-width:560px){
  .dom-price-table{min-width:0}
  .dom-price-table thead{display:none}
  .dom-price-table tbody tr{display:block;border-bottom:1px solid var(--gs-bd0,#e2e8f0);padding:.5rem 0}
  .dom-price-table td{display:flex;justify-content:space-between;border:0;padding:.45rem 1.1rem}
  .dom-price-table td::before{content:attr(data-label);font-weight:700;color:var(--gs-tx2,#64748b);font-size:.78rem}
  .dom-th-act{justify-content:flex-end !important}
  .dom-th-act::before{content:none !important}
}

/* DOMAIN-01D — live search states */
.dom-maint{display:inline-flex;align-items:center;gap:.6rem;background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;border-radius:12px;padding:.85rem 1.25rem;font-weight:600;margin-top:.5rem}
.dom-maint .bi{font-size:1.1rem}
.dom-result-loading{display:flex;align-items:center;justify-content:center;gap:.6rem;color:var(--gs-tx2,#64748b);font-weight:600;padding:1.5rem 0}
.dom-spinner{width:18px;height:18px;border:2px solid var(--gs-bd1,#cbd5e1);border-top-color:var(--gs-cp,#5b21b6);border-radius:50%;animation:dom-spin .7s linear infinite;display:inline-block}
@keyframes dom-spin{to{transform:rotate(360deg)}}
.dom-result-msg{text-align:center;color:var(--gs-tx1,#475569);background:var(--gs-sf1,#f8fafc);border:1px dashed var(--gs-bd0,#e2e8f0);border-radius:12px;padding:1.1rem;max-width:780px;margin:0 auto}
.dom-result-badge.muted{background:rgba(148,163,184,.18);color:#64748b}

/* ===== Domain search results — modern upgrade (overrides above) ===== */
.dom-result-list{max-width:840px;gap:.7rem}
.dom-result-card{padding:1.05rem 1.4rem;border-radius:16px;align-items:center}
.dom-result-card:hover{transform:translateY(-2px);box-shadow:0 20px 42px -22px rgba(15,23,42,.45);border-color:var(--gs-cp-b,#c4b5fd)}
.dom-result-main{gap:.9rem}
.dom-result-ico .bi{font-size:1.4rem;line-height:1}
.dom-result-namecol{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.dom-result-name{display:inline-flex;align-items:baseline;gap:0;font-size:1.2rem;line-height:1.1;word-break:break-word}
.dom-rc-sld{font-weight:800;color:var(--gs-tx0,#0f172a)}
.dom-rc-tld{font-weight:700;color:var(--gs-cp,#5b21b6)}
.dom-result-metarow{display:inline-flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.dom-result-tag{font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--gs-cp,#5b21b6);background:rgba(124,58,237,.10);padding:.12rem .5rem;border-radius:999px}
.dom-result-badge.ok{display:inline-flex;align-items:center;gap:.35rem}
.dom-result-badge.ok::before{content:"";width:.42rem;height:.42rem;border-radius:50%;background:#16a34a;display:inline-block}
.dom-result-end{gap:1.15rem}
.dom-result-price{font-size:1.2rem;white-space:nowrap}
.dom-result-price small{font-size:.78rem;font-weight:600;color:var(--gs-tx2,#94a3b8);margin-left:.05rem}
.dom-result-cta{border-radius:999px;padding:.5rem 1.2rem;font-weight:700;transition:transform .12s,box-shadow .2s}
.dom-result-cta:hover{transform:translateY(-1px);box-shadow:0 10px 22px -10px rgba(91,33,182,.7)}
/* Best-match / featured card */
.dom-result-card.is-feature{border:1.5px solid var(--gs-cp,#5b21b6);background:linear-gradient(180deg,rgba(124,58,237,.055),rgba(124,58,237,.012));box-shadow:0 20px 44px -24px rgba(91,33,182,.55)}
.dom-result-card.is-feature .dom-result-name{font-size:1.5rem}
.dom-result-card.is-feature .dom-result-ico .bi{font-size:1.7rem;color:var(--gs-cs,#16a34a)}
.dom-result-card.is-feature .dom-result-price{font-size:1.45rem;color:var(--gs-cp,#5b21b6)}
.dom-result-card.is-feature .dom-result-cta{padding:.62rem 1.5rem}
@media(max-width:640px){
  .dom-result-card{padding:1rem 1.1rem}
  .dom-result-name{font-size:1.08rem}
  .dom-result-card.is-feature .dom-result-name{font-size:1.25rem}
  .dom-result-end{width:100%;justify-content:space-between;gap:.6rem}
}
/* Align the "Search results" heading with the result column + tighten the gap from the hero above */
#dom-results{padding-top:1.75rem}
.dom-results-hd{max-width:840px;margin-left:auto;margin-right:auto}
/* FIX: .dom-chips/.dom-suggest use display:flex which beats the [hidden] attribute — force-hide them */
.dom-chips[hidden],.dom-suggest[hidden]{display:none!important}
/* Once a search runs, pull the suggestions up close to the main result (kill the big hero gap) */
.dom-searched .dom-hero{padding-bottom:1rem!important}
.dom-searched #dom-results{padding-top:.5rem!important}
.dom-searched .dom-results-hd{margin-bottom:1rem}
/* Main/exact-match result shown right below the search box */
.dom-main-result{max-width:840px;margin:1.35rem auto 0}
.dom-main-result .dom-result-card{margin:0}
.dom-main-loading{display:flex;align-items:center;justify-content:center;gap:.6rem;color:var(--gs-tx2,#64748b);font-weight:600;padding:1.1rem;background:var(--gs-sf1,#f8fafc);border:1px dashed var(--gs-bd0,#e2e8f0);border-radius:16px}

/* ===== Checkout cart drawer (Phase 1) ===== */
.dom-cart-overlay{position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:1090;opacity:0;transition:opacity .25s}
.dom-cart-overlay.open{opacity:1}
.dom-cart{position:fixed;top:0;right:0;height:100%;width:min(440px,100%);background:var(--gs-sf0,#fff);z-index:1091;box-shadow:-14px 0 44px rgba(15,23,42,.2);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1)}
.dom-cart.open{transform:translateX(0)}
.dom-cart-head{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.3rem;border-bottom:1px solid var(--gs-bd0,#e2e8f0);flex:none}
.dom-cart-head h3{font-size:1.05rem;font-weight:800;margin:0;display:flex;align-items:center;gap:.55rem;color:var(--gs-tx0,#0f172a)}
.dom-cart-head h3 .bi{color:var(--gs-cp,#5b21b6)}
.dom-cart-x{border:0;background:none;font-size:1.7rem;line-height:1;color:var(--gs-tx2,#94a3b8);cursor:pointer;padding:0 .3rem}
.dom-cart-x:hover{color:var(--gs-tx0,#0f172a)}
.dom-cart-body{flex:1;overflow-y:auto;padding:1.3rem}
.dci-card{border:1px solid var(--gs-bd0,#e2e8f0);border-radius:14px;padding:1.1rem;margin-bottom:1.1rem}
.dci-row{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem}
.dci-name{font-weight:800;font-size:1.08rem;color:var(--gs-tx0,#0f172a);word-break:break-word}
.dci-name .tld{color:var(--gs-cp,#5b21b6)}
.dci-price{font-weight:800;color:var(--gs-tx0,#0f172a);white-space:nowrap}
.dci-sub{font-size:.82rem;color:var(--gs-tx2,#64748b)}
.dci-meta{margin-top:.85rem;padding-top:.85rem;border-top:1px dashed var(--gs-bd0,#e2e8f0);display:flex;flex-direction:column;gap:.5rem;font-size:.85rem;color:var(--gs-tx1,#475569)}
.dci-meta .bi{color:var(--gs-cp,#5b21b6);margin-right:.45rem}
/* Cart auto-renew switch (opt-in; off by default) */
.dci-ar{display:flex;align-items:center;gap:.5rem}
.dci-ar-lbl{cursor:pointer;margin:0}
.dci-ar-state{margin-left:auto;font-weight:600;font-size:.8rem;color:var(--gs-tx2,#64748b)}
.dci-toggle{position:relative;width:38px;height:22px;flex:0 0 38px;border:0;border-radius:999px;
  background:var(--gs-bd1,#cbd5e1);cursor:pointer;padding:0;transition:background .18s ease}
.dci-toggle .dci-toggle-dot{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(15,23,42,.3);transition:transform .18s ease}
.dci-toggle.is-on{background:var(--gs-cp,#5b21b6)}
.dci-toggle.is-on .dci-toggle-dot{transform:translateX(16px)}
.dci-toggle:focus-visible{outline:2px solid var(--gs-cp,#5b21b6);outline-offset:2px}
.dci-toggle.is-on + .dci-ar-state,.dci-ar-state{transition:color .18s ease}
/* Abandoned-checkout reminder — floating card, bottom-right, domain page only */
/* Layer order (bottom → top): reminder 1070 · chat widget 1080 · cart overlay 1090 · cart drawer 1091.
   The reminder is an ambient nudge, so it must never cover the assistant panel or the checkout.
   `bottom` also clears the 56px chat launcher (20px offset + 56px + gap) instead of sitting on it. */
.dom-remind{position:fixed;right:1.15rem;bottom:5.75rem;z-index:1070;width:min(23rem,calc(100vw - 2rem));
  background:var(--gs-sf0,#fff);border:1px solid var(--gs-bd0,#e6e9f0);border-radius:18px;
  box-shadow:0 2px 6px rgba(15,23,42,.06),0 22px 50px -12px rgba(91,33,182,.30);
  padding:1.15rem 1.2rem 1.05rem;overflow:hidden;
  opacity:0;transform:translateY(16px) scale(.97);transition:opacity .3s cubic-bezier(.2,.8,.3,1),transform .3s cubic-bezier(.2,.8,.3,1)}
.dom-remind.is-in{opacity:1;transform:none}
/* soft brand wash so it reads as "ours" without shouting */
.dom-remind::after{content:"";position:absolute;top:-46px;right:-46px;width:130px;height:130px;border-radius:50%;
  background:radial-gradient(circle,rgba(124,58,237,.13),transparent 70%);pointer-events:none}
.dom-remind-x{position:absolute;top:.55rem;right:.6rem;border:0;background:none;font-size:1.2rem;line-height:1;
  color:var(--gs-tx2,#9aa4b2);cursor:pointer;padding:.15rem .32rem;border-radius:8px;transition:all .15s ease;z-index:2}
.dom-remind-x:hover{background:var(--gs-bg1,#f1f5f9);color:var(--gs-tx1,#334155)}
.dom-remind-top{display:inline-flex;align-items:center;gap:.4rem;font-size:.66rem;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:#15803d;background:#dcfce7;padding:.25rem .55rem;border-radius:999px}
.dom-remind-dot{width:6px;height:6px;border-radius:50%;background:#16a34a;
  box-shadow:0 0 0 0 rgba(22,163,74,.6);animation:domRemindPulse 2s infinite}
@keyframes domRemindPulse{70%{box-shadow:0 0 0 6px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}
.dom-remind-row{display:flex;align-items:center;gap:.6rem;margin:.7rem 0 .1rem}
.dom-remind-ico{flex:0 0 34px;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--gs-cp,#5b21b6),#7c3aed);color:#fff;font-size:.95rem;
  box-shadow:0 4px 10px -2px rgba(91,33,182,.45)}
.dom-remind-name{font-size:1.06rem;font-weight:800;color:var(--gs-tx0,#0f172a);word-break:break-all;line-height:1.2}
.dom-remind-name .tld{color:var(--gs-cp,#5b21b6)}
.dom-remind-price{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  margin:.7rem 0 .55rem;padding:.5rem .7rem;border-radius:10px;background:var(--gs-bg1,#f8fafc);
  border:1px dashed var(--gs-bd0,#e2e8f0);font-size:.8rem;color:var(--gs-tx2,#64748b)}
.dom-remind-price strong{font-size:.95rem;color:var(--gs-tx0,#0f172a);font-weight:800}
.dom-remind-text{margin:0 0 .85rem;font-size:.82rem;line-height:1.5;color:var(--gs-tx1,#475569)}
.dom-remind-pay{display:flex;align-items:center;justify-content:center;gap:.45rem;width:100%;border:0;border-radius:11px;
  padding:.72rem 1rem;cursor:pointer;color:#fff;font-weight:700;font-size:.92rem;letter-spacing:.01em;
  background:linear-gradient(135deg,var(--gs-cp,#5b21b6),#7c3aed);
  box-shadow:0 6px 16px -4px rgba(91,33,182,.5);transition:transform .16s ease,box-shadow .16s ease,filter .16s ease}
.dom-remind-pay:hover{filter:brightness(1.07);transform:translateY(-1px);box-shadow:0 10px 22px -6px rgba(91,33,182,.6)}
.dom-remind-pay:active{transform:translateY(0)}
.dom-remind-help{margin:.65rem 0 0;font-size:.75rem;color:var(--gs-tx2,#64748b);text-align:center}
.dom-remind-chat{border:0;background:none;padding:0;font:inherit;font-weight:700;color:var(--gs-cp,#5b21b6);
  cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.dom-remind-chat:hover{color:#7c3aed}
@media (max-width:480px){.dom-remind{right:.6rem;left:.6rem;bottom:5.4rem;width:auto;padding:1rem}}
@media (prefers-reduced-motion:reduce){.dom-remind,.dom-remind-pay{transition:none}.dom-remind-dot{animation:none}}
.dci-total-row{display:flex;align-items:center;justify-content:space-between;margin:.45rem 0;color:var(--gs-tx1,#475569)}
.dci-total-row.grand{font-size:1.25rem;font-weight:800;color:var(--gs-tx0,#0f172a);border-top:1px solid var(--gs-bd0,#e2e8f0);padding-top:.7rem;margin-top:.7rem}
.dom-cart-pay{width:100%;justify-content:center;margin-top:1rem;border-radius:999px}
.dci-gw{display:grid;gap:.55rem;margin:.6rem 0 .2rem}
.dci-gw label{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;border:1.5px solid var(--gs-bd0,#e2e8f0);border-radius:12px;padding:.7rem .9rem;cursor:pointer;font-weight:600;color:var(--gs-tx1,#475569);transition:border-color .15s,background .15s}
.dci-gw-note{flex-basis:100%;font-size:.72rem;font-weight:500;line-height:1.35;color:var(--gs-tx2,#64748b);padding-left:1.9rem;margin-top:-.2rem}
/* Manual-payment (held) screen — QR title + info banner */
.dci-mq-title{display:flex;align-items:center;justify-content:center;gap:.4rem;font-weight:700;font-size:.9375rem;color:var(--gs-tx0,#0f172a);margin:.85rem 0 .2rem;text-align:center}
.dci-mq-title .bi{color:var(--gs-cp,#5b21b6)}
.dci-hold-note{display:flex;align-items:flex-start;gap:.55rem;background:var(--gs-sf1,#f8fafc);border:1px solid var(--gs-bd0,#e2e8f0);border-radius:12px;padding:.75rem .9rem;font-size:.8125rem;line-height:1.5;color:var(--gs-tx1,#475569);text-align:left;margin:1rem 0}
.dci-hold-note .bi{color:var(--gs-cs,#16a34a);font-size:1rem;flex:0 0 auto;margin-top:.05rem}
.dci-gw label:has(input:checked){border-color:var(--gs-cp,#5b21b6);background:rgba(124,58,237,.05)}
.dci-gw label.is-pref{border-color:var(--gs-cp,#5b21b6)}
.dci-gw .bi{color:var(--gs-cp,#5b21b6);font-size:1.15rem}
.dci-gw-pref{margin-left:auto;font-size:.66rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--gs-cp-fg,#fff);background:var(--gs-cp,#5b21b6);border-radius:999px;padding:.18rem .5rem;white-space:nowrap}
.dci-gw-test{margin-left:auto;font-size:.66rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:#92400E;background:#FEF3C7;border:1px solid #FCD34D;border-radius:999px;padding:.18rem .5rem;white-space:nowrap}
.dci-gw-pref+.dci-gw-test{margin-left:.4rem}
.dci-back{background:none;border:0;color:var(--gs-cp,#5b21b6);font-weight:600;cursor:pointer;padding:0;margin-bottom:.85rem;display:inline-flex;align-items:center;gap:.35rem;font-size:.9rem}
.dci-note{font-size:.8rem;color:var(--gs-tx2,#94a3b8);margin-top:.7rem;text-align:center;display:flex;align-items:center;justify-content:center;gap:.4rem}
/* Phase 2 — suggestions + multi-item cart */
.dci-sg-hd{display:flex;align-items:center;justify-content:space-between;font-weight:800;color:var(--gs-tx0,#0f172a);margin-bottom:.6rem}
.dci-link{background:none;border:0;color:var(--gs-cp,#5b21b6);font-weight:700;font-size:.85rem;cursor:pointer;padding:0}
.dci-sg{display:flex;align-items:center;justify-content:space-between;gap:.75rem;border:1px solid var(--gs-bd0,#e2e8f0);border-radius:12px;padding:.7rem .85rem;margin-bottom:.55rem}
.dci-sg-main{min-width:0}
.dci-sg-name{font-size:14px;color:var(--gs-tx0,#0f172a)}
.dci-sg-hide{display:flex;align-items:center;gap:.5rem;margin:.35rem 0 .8rem;font-size:.85rem;font-weight:500;color:var(--gs-tx2,#64748b);cursor:pointer}
.dci-sg-hide input{flex:none;margin:0}
.dci-sg-items{transition:filter .25s ease,opacity .25s ease}
.dci-sg-items.is-blurred{filter:blur(4px);opacity:.5;pointer-events:none;user-select:none}
.dci-sg-sub{font-size:.8rem;color:var(--gs-tx2,#64748b)}
.dci-sg-end{display:flex;align-items:center;gap:.6rem;flex:none}
.dci-sg-price{font-size:.82rem;font-weight:700;color:var(--gs-tx1,#475569);white-space:nowrap}
.dci-sg-add{width:34px;height:34px;border-radius:9px;border:1.5px solid var(--gs-cp,#5b21b6);background:#fff;color:var(--gs-cp,#5b21b6);cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none;transition:background .15s}
.dci-sg-add.on{background:var(--gs-cp,#5b21b6);color:var(--gs-cp-fg,#fff)}
.dci-sg-badge{font-size:.72rem;font-weight:700;line-height:1;padding:.34rem .55rem;border-radius:999px;border:1px solid currentColor;background:#fff;white-space:nowrap}
.dci-sg.is-unavail{opacity:.7}
.dci-sg.is-unavail .dci-sg-name{color:var(--gs-tx2,#64748b)}
.dci-unavail-note{font-size:.82rem;color:var(--gs-tx1,#475569);background:var(--gs-sf1,#f8fafc);border:1px solid var(--gs-bd0,#e2e8f0);border-radius:10px;padding:.7rem .85rem;text-align:center}
.dci-skip{display:block;width:100%;text-align:center;margin-top:.7rem}
.dci-card-title{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--gs-tx2,#64748b);margin-bottom:.5rem}
.dci-line{display:flex;align-items:center;justify-content:space-between;padding:.4rem 0;color:var(--gs-tx1,#475569);font-size:.9rem}
.dci-line-end{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;color:var(--gs-tx0,#0f172a)}
.dci-rm{border:0;background:none;color:#ef4444;font-size:1.15rem;line-height:1;cursor:pointer;padding:0 .2rem}
/* Smaller add button + tool detail view */
.dci-sg-add{width:28px;height:28px;border-radius:8px}
.dci-sg-add .bi{font-size:.82rem}
.dci-sg-main{cursor:pointer;flex:1;min-width:0}
.dci-sg-main:hover .dci-sg-name{color:var(--gs-cp,#5b21b6)}
.dci-detail{text-align:center;border:1px solid var(--gs-bd0,#e2e8f0);border-radius:16px;padding:1.5rem 1.25rem;margin-bottom:.9rem}
.dci-detail-ico{margin-bottom:.55rem}
.dci-detail-name{font-size:1.3rem;font-weight:800;color:var(--gs-tx0,#0f172a)}
.dci-detail-tag{font-size:.9rem;color:var(--gs-tx1,#475569);margin-top:.2rem}
.dci-detail-desc{font-size:.85rem;color:var(--gs-tx2,#64748b);margin:.85rem 0 1.1rem;line-height:1.55}
.dci-detail-plan{display:flex;align-items:center;justify-content:space-between;gap:.75rem;border:1.5px solid var(--gs-cp,#5b21b6);border-radius:12px;padding:.85rem 1rem;text-align:left;margin-bottom:1rem}
.dci-detail-planname{font-weight:800;color:var(--gs-tx0,#0f172a)}
.dci-detail-price{font-weight:800;color:var(--gs-tx0,#0f172a)}
.dci-detail-sub{font-size:.8rem;color:var(--gs-tx2,#64748b)}
/* Dynamic tool icon in list + detail, plan selector, payment icon, add-on tooltip */
.dci-sg-main{display:flex;align-items:center;gap:.6rem}
.dci-sg-ico{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;font-size:1.2rem;font-weight:800;color:var(--gs-cp,#5b21b6);flex:none}
.dci-sg-ico img{width:28px;height:28px;border-radius:7px;object-fit:contain}
.dci-detail-ico{font-size:2rem;font-weight:800;color:var(--gs-cp,#5b21b6)}
.dci-detail-ico img{width:54px;height:54px;border-radius:12px;object-fit:contain}
.dci-detail-ico .bi{font-size:2.3rem;color:var(--gs-cp,#5b21b6)}
.dci-plan-label{font-size:.78rem;font-weight:700;color:var(--gs-tx2,#64748b);text-align:left;margin:.2rem 0 .5rem}
.dci-plan-list{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}
.dci-plan{display:flex;align-items:center;justify-content:space-between;gap:.75rem;border:1.5px solid var(--gs-bd0,#e2e8f0);border-radius:12px;padding:.8rem 1rem;text-align:left;cursor:pointer;transition:border-color .15s,background .15s}
.dci-plan.sel{border-color:var(--gs-cp,#5b21b6);background:rgba(124,58,237,.05)}
/* No width: the logos are different shapes (a wide wordmark vs a square wallet icon), so height
   alone lets each keep its own aspect ratio instead of being squeezed into a 22px square. */
.dci-gw-img{height:22px;border-radius:5px;object-fit:contain;vertical-align:middle}
.dci-addon-note{cursor:help;display:inline-flex;align-items:center;gap:.3rem}
/* Payment processing animation */
.dci-pay-anim{text-align:center;padding:2rem 1rem}
.dci-pay-anim .dom-spinner{margin:0 auto 1.25rem}
.dci-pay-steps{list-style:none;margin:0 auto;padding:0;text-align:left;max-width:280px}
.dci-pay-steps li{display:flex;align-items:center;gap:.6rem;padding:.4rem 0;color:var(--gs-tx2,#94a3b8);opacity:.45;transition:opacity .3s,color .3s}
.dci-pay-steps li.on{opacity:1;color:var(--gs-tx1,#334155)}
.dci-pay-dot{width:.55rem;height:.55rem;border-radius:50%;background:var(--gs-bd1,#cbd5e1);flex:none;transition:background .3s}
.dci-pay-steps li.on .dci-pay-dot{background:var(--gs-cs,#16a34a)}
.dci-qr{text-align:center;padding:.25rem 0 1rem}
.dci-qr-amount{display:inline-flex;flex-direction:column;align-items:center;gap:.1rem;margin:0 auto 1rem;padding:.7rem 1.4rem;background:linear-gradient(135deg,var(--gs-cp,#7c3aed),#9333ea);border-radius:14px;color:#fff;box-shadow:0 8px 22px rgba(124,58,237,.30)}
.dci-qr-amount-lbl{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;opacity:.9}
.dci-qr-amount-val{font-size:1.6rem;font-weight:800;line-height:1.05}
.dci-qr-hint{color:var(--gs-tx2,#64748b);font-size:.88rem;line-height:1.5;max-width:300px;margin:0 auto 1rem}
.dci-qr-box{position:relative;display:inline-block;padding:1rem;background:#fff;border-radius:18px;box-shadow:0 10px 30px rgba(2,6,23,.12)}
.dci-qr-corner{position:absolute;width:20px;height:20px;border:3px solid var(--gs-cp,#7c3aed)}
.dci-qr-corner.tl{top:9px;left:9px;border-right:0;border-bottom:0;border-radius:8px 0 0 0}
.dci-qr-corner.tr{top:9px;right:9px;border-left:0;border-bottom:0;border-radius:0 8px 0 0}
.dci-qr-corner.bl{bottom:9px;left:9px;border-right:0;border-top:0;border-radius:0 0 0 8px}
.dci-qr-corner.br{bottom:9px;right:9px;border-left:0;border-top:0;border-radius:0 0 8px 0}
.dci-qr-img{display:block;width:224px;height:224px;max-width:62vw;max-height:62vw;object-fit:contain;image-rendering:pixelated}
.dci-qr-wait{margin-top:1rem;font-size:.9rem;font-weight:600;color:var(--gs-tx1,#475569);display:flex;align-items:center;justify-content:center;gap:.5rem}
.dci-qr-pulse{width:.6rem;height:.6rem;border-radius:50%;background:var(--gs-cs,#16a34a);display:inline-block;animation:dciPulse 1.3s infinite}
@keyframes dciPulse{0%{box-shadow:0 0 0 0 rgba(22,163,74,.5)}70%{box-shadow:0 0 0 8px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}
.dci-qr-apps{margin-top:1.25rem;padding-top:1.1rem;border-top:1px solid var(--gs-bd1,#eef2f7)}
.dci-qr-apps-lbl{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--gs-tx3,#94a3b8);margin-bottom:.6rem}
.dci-qr-apps-row{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:center}
.dci-qr-app{display:inline-flex;align-items:center;gap:.4rem;padding:.34rem .75rem;font-size:.8rem;font-weight:600;color:var(--gs-tx1,#334155);background:var(--gs-sf1,#f8fafc);border:1px solid var(--gs-bd1,#e2e8f0);border-radius:999px}
.dci-qr-app::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--c,#7c3aed);flex:none}
.dci-qr-fullpage{display:inline-block;margin-top:1.1rem;font-size:.88rem;font-weight:600;color:var(--gs-cp,#7c3aed);text-decoration:none}
.dci-qr-fullpage:hover{text-decoration:underline}
.dci-error{text-align:center;padding:1.75rem .5rem 1rem}
.dci-error-icon{display:inline-flex;align-items:center;justify-content:center;width:66px;height:66px;margin:0 auto .9rem;border-radius:50%;background:#fef3c7;color:#f59e0b;font-size:2rem;line-height:1}
.dci-error-title{font-size:1.18rem;font-weight:800;color:var(--gs-tx1,#1e293b);margin-bottom:.5rem}
.dci-error-msg{color:var(--gs-tx2,#64748b);font-size:.92rem;line-height:1.55;max-width:340px;margin:0 auto 1.25rem}
.dci-err-back{display:inline-flex;align-items:center;justify-content:center;width:100%;margin-top:.6rem;padding:.6rem;background:none;border:none;color:var(--gs-cp,#7c3aed);font-weight:600;font-size:.92rem;cursor:pointer;border-radius:10px;transition:background .15s}
.dci-err-back:hover{background:var(--gs-cp-s,#f5f3ff);text-decoration:none}
/* In-drawer auth (login + register + social) */
.dci-auth-tabs{display:flex;gap:.5rem;margin-bottom:1rem;border-bottom:1px solid var(--gs-bd1,#e2e8f0)}
.dci-auth-tab{flex:1;padding:.6rem;background:none;border:none;border-bottom:2px solid transparent;font-weight:700;font-size:.92rem;color:var(--gs-tx2,#64748b);cursor:pointer;margin-bottom:-1px}
.dci-auth-tab.is-active{color:var(--gs-cp,#7c3aed);border-bottom-color:var(--gs-cp,#7c3aed)}
.dci-auth-form{display:none;flex-direction:column;gap:.7rem}
.dci-auth-form.is-active{display:flex}
.dci-auth-field{display:flex;flex-direction:column;gap:.3rem;font-size:.8rem;font-weight:600;color:var(--gs-tx2,#475569)}
.dci-auth-field input,.dci-auth-field select{padding:.6rem .7rem;border:1px solid var(--gs-bd1,#e2e8f0);border-radius:9px;font-size:.9rem;color:var(--gs-tx1,#1e293b);background:#fff;font-weight:500}
.dci-auth-field input:focus,.dci-auth-field select:focus{outline:none;border-color:var(--gs-cp,#7c3aed);box-shadow:0 0 0 3px rgba(124,58,237,.12)}
.dci-auth-2col{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.dci-phone{display:flex;align-items:stretch}
.dci-phone-dial{display:inline-flex;align-items:center;padding:0 .55rem;background:var(--gs-sf1,#f1f5f9);border:1px solid var(--gs-bd1,#e2e8f0);border-right:0;border-radius:9px 0 0 9px;font-size:.82rem;font-weight:700;color:var(--gs-tx2,#64748b);white-space:nowrap}
.dci-phone input{border-radius:0 9px 9px 0!important;flex:1;min-width:0}
.dci-auth-row{display:flex;align-items:center;justify-content:space-between;font-size:.82rem;margin:.1rem 0}
.dci-auth-check{display:flex;align-items:flex-start;gap:.45rem;font-size:.8rem;font-weight:500;color:var(--gs-tx2,#64748b);cursor:pointer;line-height:1.45}
.dci-auth-check input{margin-top:.15rem;flex:none}
.dci-auth-check a,.dci-auth-link{color:var(--gs-cp,#7c3aed);text-decoration:none;font-weight:600}
.dci-auth-alert{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;border-radius:9px;padding:.6rem .75rem;font-size:.85rem;margin-bottom:.75rem}
.dci-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none}
.dci-ac{position:relative}
.dci-ac-list{position:absolute;top:100%;left:0;right:0;z-index:40;margin:.25rem 0 0;padding:.25rem;list-style:none;background:#fff;border:1px solid var(--gs-bd1,#e2e8f0);border-radius:10px;box-shadow:0 14px 34px rgba(2,6,23,.18);max-height:240px;overflow-y:auto}
.dci-ac-item{display:flex;align-items:center;gap:.55rem;padding:.5rem .6rem;border-radius:8px;cursor:pointer;font-size:.88rem;color:var(--gs-tx1,#1e293b)}
.dci-ac-item:hover{background:var(--gs-cp-s,#f5f3ff)}
.dci-ac-flag{width:24px;height:18px;flex:none;border-radius:3px;object-fit:cover;border:1px solid rgba(0,0,0,.08);display:inline-block}
.dci-ac-name{flex:1;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dci-ac-dial{color:var(--gs-tx2,#64748b);font-size:.8rem;font-weight:700;flex:none}
.dci-auth .gs-oauth-grid{margin-bottom:.4rem}
/* Social "More ways to sign in" collapse toggle (global — login/register/drawer/connected-accounts) */
.gs-oauth-more{display:flex;align-items:center;justify-content:center;gap:.45rem;width:100%;margin-top:.55rem;padding:.6rem;background:transparent;border:1px dashed var(--gs-bd1,#cbd5e1);border-radius:10px;color:var(--gs-tx2,#64748b);font-size:.85rem;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.gs-oauth-more:hover{background:var(--gs-cp-s,#f5f3ff);border-color:var(--gs-cp,#a78bfa);color:var(--gs-cp,#7c3aed)}
.gs-oauth-more-caret{font-size:.7rem;transition:transform .2s}
.gs-oauth-wrap.is-open .gs-oauth-more-caret{transform:rotate(180deg)}

/* Domain cart drawer — live transfer-status spinner (orderDone screen). */
@keyframes dcispin{to{transform:rotate(360deg)}}

/* Breadcrumb rendered as a full-width BAR (blog, blog-detail, tool, category, pricing,
   contact, reviews). Those views use .gs-breadcrumb — which is the framework's LIST style
   (padding:0;margin:0) — so the bar sat flush against the header above and the title below.
   Scoped to "> .gs-container" so a real <ol class="gs-breadcrumb"> list is never affected. */
.gs-breadcrumb > .gs-container { padding-top: 1.05rem; padding-bottom: 1.05rem; }
@media (max-width: 575.98px) { .gs-breadcrumb > .gs-container { padding-top: .75rem; padding-bottom: .75rem; } }

/* ===== Read-only (subscription) notice — dashboard-wide =====================================
   Sits above the page header, so it must supply the horizontal padding the content wrapper
   would otherwise give it, and match the header's gutter at every breakpoint. */
.gs-dash-readonly{ padding: var(--gs-space-4, 1rem) var(--gs-space-8, 2rem) var(--gs-space-5, 1.25rem);
  background: var(--gs-surface-0, #fff); border-bottom: 1px solid var(--gs-border-subtle, rgba(0,0,0,.07)); }
@media (max-width: 991.98px){ .gs-dash-readonly{ padding: var(--gs-space-4, 1rem) var(--gs-space-4, 1rem) var(--gs-space-4, 1rem); } }
@media (max-width: 575.98px){ .gs-dash-shell .gs-dash-readonly{ padding: .75rem .9rem 1rem; } }


/* ── RENEW DRAWER — current plan + upgrades ─────────────────────────────────
   Step 1 of a renewal. The plan you are on is stated plainly and highlighted; the plans above it
   follow. No downgrades, no unrelated products — this is the moment someone is trying to pay. */
.gpay-cur{border:1.5px solid var(--gs-cp,#5b21b6);border-radius:14px;padding:.9rem 1rem;
  background:linear-gradient(180deg,var(--gs-cp-s,#f5f3ff),var(--gs-surface-0,#fff));margin-bottom:1.1rem}
.gpay-cur-tag{font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gs-cp,#5b21b6);margin-bottom:.35rem}
.gpay-cur-row{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;margin-bottom:.7rem}
.gpay-cur-name{font-size:1.02rem;font-weight:800;color:var(--gs-tx1,#111827)}
.gpay-cur-price{font-size:.9rem;font-weight:700;color:var(--gs-cp,#5b21b6);white-space:nowrap}
.gpay-cur-btn{width:100%;justify-content:center}
.gpay-cur-note{margin:0}

.gpay-up-hd{font-size:.8rem;font-weight:800;color:var(--gs-tx1,#111827);margin:0 0 .15rem}
.gpay-up-sub{font-size:.76rem;color:var(--gs-tx2,#6b7280);margin:0 0 .6rem}
.gpay-up{display:block;width:100%;text-align:left;background:var(--gs-surface-0,#fff);cursor:pointer;
  border:1px solid var(--gs-border-subtle,rgba(0,0,0,.12));border-radius:12px;padding:.75rem .85rem;
  margin-bottom:.6rem;transition:border-color .15s,box-shadow .15s,transform .12s}
.gpay-up:hover{border-color:var(--gs-cp,#5b21b6);box-shadow:0 4px 14px rgba(91,33,182,.13);transform:translateY(-1px)}
.gpay-up-row{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem}
.gpay-up-name{font-weight:700;font-size:.92rem;color:var(--gs-tx1,#111827)}
.gpay-up-price{font-weight:700;font-size:.86rem;color:var(--gs-cp,#5b21b6);white-space:nowrap}
.gpay-up-badge{display:inline-block;font-size:.62rem;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;background:var(--gs-cp,#5b21b6);color:var(--gs-cp-fg,#fff);border-radius:999px;padding:.1rem .45rem;
  vertical-align:middle;margin-left:.3rem}
.gpay-up-delta{font-size:.72rem;color:var(--gs-tx2,#6b7280);margin-top:.15rem}
.gpay-up-gains{list-style:none;margin:.55rem 0 0;padding:0}
.gpay-up-gains li{position:relative;padding-left:1.15rem;font-size:.78rem;line-height:1.45;
  color:var(--gs-tx1,#111827);margin-bottom:.15rem}
.gpay-up-gains li::before{content:"\F26E";font-family:"bootstrap-icons";position:absolute;left:0;top:.05rem;
  font-size:.72rem;color:var(--gs-cs,#16a34a)}
.gpay-up-gains li.gpay-up-more{color:var(--gs-tx2,#6b7280)}
.gpay-up-gains li.gpay-up-more::before{content:"";}


/* ── Invoice history pager (shared list-pager look) ─────────────────────────── */
.gs-inv-pager{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap;padding:.85rem 1rem;
  border-top:1px solid var(--gs-border-subtle,rgba(0,0,0,.08))}
.gs-inv-pg{min-width:32px;height:32px;padding:0 .55rem;display:inline-flex;align-items:center;
  justify-content:center;border:1px solid var(--gs-border-subtle,rgba(0,0,0,.12));border-radius:8px;
  font-size:.8rem;font-weight:600;color:var(--gs-tx1,#111827);text-decoration:none;background:var(--gs-surface-0,#fff)}
.gs-inv-pg:hover{border-color:var(--gs-cp,#5b21b6);color:var(--gs-cp,#5b21b6)}
.gs-inv-pg.is-on{background:var(--gs-cp,#5b21b6);border-color:var(--gs-cp,#5b21b6);color:var(--gs-cp-fg,#fff)}
.gs-inv-pg.is-off{opacity:.45;pointer-events:none}
.gs-inv-count{margin-left:auto;font-size:.76rem;color:var(--gs-tx2,#6b7280)}
@media (max-width:575.98px){ .gs-inv-count{margin-left:0;width:100%;text-align:center} }

/* ── Settings toggles ───────────────────────────────────────────────────────
   The framework rules target `.gs-toggle-input:checked + .gs-toggle-track` and expect the thumb to
   be a SIBLING of the input. The settings markup is `<label class="gs-toggle"><input><div class=
   "gs-toggle-track"><div class="gs-toggle-thumb"></div></div></label>` — unclassed input, nested
   thumb — so neither selector ever matched and the pill never moved on click. These rules match the
   markup that actually exists. */
.gs-toggle{display:inline-flex;align-items:center;cursor:pointer;position:relative}
.gs-toggle > input[type="checkbox"]{position:absolute;opacity:0;width:0;height:0;margin:0}
.gs-toggle > input[type="checkbox"]:checked + .gs-toggle-track{background:var(--gs-cp,#5b21b6)}
.gs-toggle > input[type="checkbox"]:checked + .gs-toggle-track .gs-toggle-thumb{transform:translateX(1.25rem)}
.gs-toggle > input[type="checkbox"]:focus-visible + .gs-toggle-track{box-shadow:0 0 0 3px rgba(91,33,182,.25)}
.gs-toggle > input[type="checkbox"]:disabled + .gs-toggle-track{opacity:.5;cursor:not-allowed}

/* Verified mark — ONE definition, used by the dashboard header, public profile and anywhere else.
   Same glyph the super-admin business screen uses (bi-patch-check-fill); colour comes from the brand
   token so it stays consistent if the brand colour changes. Reuse partials/verified-badge.php. */
.gs-verified{color:#0d6efd;font-size:.82rem;margin-left:.3rem;vertical-align:baseline;line-height:1}
/* #0d6efd = the exact blue the super-admin business screen uses (Bootstrap .text-primary), so the
   mark is identical for staff and customers. Deliberately NOT the brand purple: verification is a
   trust signal, and it reads as one only if it looks the same everywhere it appears. */
h1 .gs-verified,h2 .gs-verified{font-size:.7em;margin-left:.35rem}
[data-theme="dark"] .gs-verified{color:#6ea8fe}   /* Bootstrap blue-300, legible on dark */

/* Suspended banner sits on the page background, not on a white strip: it is a standing state, not a
   header element, so it should read as part of the page rather than an extension of the chrome.
   Keeps the read-only wrapper's horizontal padding (same gutter as the cards below). */
.gs-dash-suspended{background:transparent;border-bottom:0;padding-bottom:0}
@media (max-width:991.98px){ .gs-dash-suspended{padding-bottom:0} }
@media (max-width:575.98px){ .gs-dash-shell .gs-dash-suspended{padding-bottom:0} }

/* ── TENANT-09: white-label ("solo") auth page ────────────────────────────────────────────────
   On a customer's own domain the split shell's left panel is dropped (it is Goji MARKETPLACE
   marketing — someone else's advertising in front of the tenant's staff). What remains is a single
   centred card carrying only the tenant's own logo. Scoped to .is-solo so the platform's split
   sign-in is completely untouched. */
.gs-auth-page.is-solo { grid-template-columns: 1fr !important; }
.gs-auth-page.is-solo .gs-auth-form-side { min-height: 100dvh; }
/* The logo lives in .gs-mobile-logo, which is display:none above 576px — on a solo page it is the
   ONLY mark, so show and centre it at every width. */
.gs-auth-page.is-solo .gs-mobile-logo { display: flex; justify-content: center; margin-bottom: 1.5rem; }
.gs-auth-page.is-solo .gs-auth-card { max-width: 27rem; margin-inline: auto; }
@media (min-width: 768px) {
  .gs-auth-page.is-solo .gs-auth-card { padding: 2.25rem; }
}

/* ============================================================
   TOOL PAGE HERO polish (2026-07-29)
   Right rail = price (derived from real plans) + one clear CTA
   + icon-only save actions; description becomes a readable
   "Overview" column instead of a full-width text wall.
   ============================================================ */
.gs-th-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .6rem;
  margin-left: auto;
}
.gs-th-pricebox { text-align: right; }
.gs-th-eyebrow {
  font-size: .6563rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gs-tx2, #64748b);
  margin-bottom: .1rem;
}
.gs-th-price {
  font-family: var(--gs-fd, inherit);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--gs-tx0, #0f172a);
  line-height: 1.05;
}
.gs-th-price .per {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--gs-tx2, #64748b);
  margin-left: .1rem;
}
.gs-th-actions { display: flex; align-items: center; gap: .5rem; }
/* Icon-only fav/save: fixed square so the two read as a quiet pair, not two labelled buttons. */
.gs-th-iconbtn { width: 34px; padding-left: 0; padding-right: 0; justify-content: center; }
@media (max-width: 575.98px) {
  .gs-th-side { align-items: flex-start; margin-left: 0; width: 100%; }
  .gs-th-pricebox { text-align: left; }
}
/* Readable measure for the long description — a full-container 1300px text line is a wall. */
.gs-tool-about { max-width: 860px; margin-bottom: 1rem; }
.gs-tool-about-body { font-size: .9688rem; line-height: 1.75; color: var(--gs-tx1, #334155); }
.gs-tool-about-body p { margin-bottom: .95rem; }
.gs-tool-about-body p:last-child { margin-bottom: 0; }

/* Breadcrumb was pressed against the tool hero (and the availability notice when one shows) —
   give the page header room to breathe. Scoped by adjacency so no other breadcrumb page moves. */
nav.gs-breadcrumb + .gs-tool-hero,
nav.gs-breadcrumb + .gs-tool-notice { margin-top: 1.25rem; }

/* ============================================================
   MOBILE AUDIT 2026-07-29 — measured failures only.
   Pages already clean at 390px (home, tools, categories, blog
   post, compare, deals, contact, legal, payment-methods, about,
   404, domain, pricing, tool, auth) were left untouched.
   ============================================================ */

/* /blog/ overflowed 114px: .gs-pagination is nowrap and a long page list (11 children) ran to
   504px. Wrap on phones — proven live to take scrollWidth 504 → 390. Desktop untouched (it fits,
   so no wrap ever occurs there, but scope it anyway per house discipline). */
@media (max-width: 767.98px) {
  .gs-pagination { flex-wrap: wrap; justify-content: center; row-gap: .375rem; }
}

/* /search/ overflowed 76px: .gs-srch-main is a grid child, and a grid child's min-width:auto lets
   its nowrap content (the result-type tab strip) size the 1fr track to 441px in a 342px grid.
   min-width:0 bounds the track; .gs-srch-tabs already has overflow-x:auto and becomes a real
   scroller the moment its container is bounded. Proven live: 466 → 390 with this alone. */
.gs-srch-main { min-width: 0; }

/* Topbar dismiss was a 24×24 tap target. Grow the HIT AREA only — padding, fixed square, same
   glyph size — so the announcement bar's look doesn't change but a thumb can actually hit it. */
.gs-topbar-close {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 360px-class phones: the navbar row (brand + search/theme/auth/burger) overflowed its container
   by ~16px, pressing the burger against the screen edge and adding 1px of page h-scroll on every
   public page. Tighten the two spacings that sum to it — proven live at 360: over 1 → 0. */
@media (max-width: 380px) {
  .gs-nav-inner   { padding-inline: 12px; }
  .gs-nav-actions { gap: 4px; }
}

/* 320px-class phones (iPhone SE 1, a folded Galaxy cover screen). The block above fixed 360 and
   stops there: measured live, the row needs 305px and 320 offers 288, so the burger sat 29px off
   the right edge and every public page scrolled sideways.

   ⚠ THE LOGO GIVES THE WIDTH, NOT THE CTA. Get Started is 111px and the widest item in the row,
     but it is the page's primary conversion control and the drawer is not a substitute for it
     being visible. The logo is 114x40; at 30px tall it is 86px, which frees 28px against the 17
     that are needed — clearing the row with slack instead of landing on the boundary.

   ⚠ 340, not 380, so 360/375/390/414 keep the logo they have today. Those widths already fit;
     shrinking a brand mark on phones that never overflowed would be a cost with no benefit. */
@media (max-width: 340px) {
  /* ⚠ .gs-logo-img IS THE ONE THE LAYOUT RENDERS. .gs-brand-logo-img is declared at § above and
     matches nothing — targeting it here fixed nothing and measured as such. */
  .gs-logo-img { height: 38px; }
  /* min-width:auto is the flex default and would stop the brand yielding at all if a future
     logo is wider still; 0 lets it shrink rather than push the burger off-screen again. */
  .gs-brand { min-width: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   TOOLS DIRECTORY — /tools and the curated listings (/trending /new /featured /top-rated /deals)
   plus the shared tool card, which category pages and the related-tools rail also use.

   Responsive contract, measured not assumed:
     ≥1200  3 cards per row, hero copy + art side by side
     ≥ 992  3 cards, art still shown
     ≥ 768  2 cards, art dropped (the copy needs the width more than the decoration does)
     ≥ 576  2 cards, filter bar wraps
     < 576  1 card, controls full width, 44px tap targets
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* ── hero ─────────────────────────────────────────────────────────────────────────────── */
.tools-hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem;align-items:center}
.tools-hero-copy{min-width:0}

/* The stat row: equal, self-sizing cards that wrap rather than squash. */
.tools-hero-stats{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}
.tools-stat{flex:1 1 8.5rem;max-width:12rem}

/* ── decorative cluster ───────────────────────────────────────────────────────────────── */
.tools-hero-art{position:relative;display:none;min-height:16rem}
.tools-art-core,.tools-art-tile{position:absolute;display:flex;align-items:center;justify-content:center;
  border-radius:1rem;box-shadow:0 10px 30px -12px rgba(15,23,42,.28)}
.tools-art-core{width:5.5rem;height:5.5rem;left:50%;top:50%;transform:translate(-50%,-50%);
  border-radius:1.35rem;background:linear-gradient(135deg,#7c3aed,#5b21b6);color:#fff;font-size:2rem;
  box-shadow:0 18px 40px -14px rgba(91,33,182,.6)}
.tools-art-tile{width:3.1rem;height:3.1rem;background:#fff;border:1px solid var(--gs-bd0,#e2e8f0);font-size:1.1rem}
.tools-art-1{top:4%;right:20%;color:#2563eb}
.tools-art-2{top:16%;right:2%;color:#e11d48}
.tools-art-3{top:36%;left:2%;color:#16a34a}
.tools-art-4{top:52%;right:2%;color:#ea580c}
.tools-art-5{bottom:6%;left:16%;color:#7c3aed}
.tools-art-dot{position:absolute;border-radius:50%}
.tools-art-d1{width:.5rem;height:.5rem;top:26%;left:22%;background:#93c5fd}
.tools-art-d2{width:.6rem;height:.6rem;bottom:26%;right:22%;background:#c4b5fd}

/* ── filter bar ───────────────────────────────────────────────────────────────────────── */
.tools-filter-bar{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  background:var(--gs-sf0,#fff);border:1px solid var(--gs-bd0,#e2e8f0);border-radius:16px;
  padding:.85rem 1rem;margin:1.75rem 0 1.25rem;box-shadow:var(--gs-sh-sm,0 1px 2px rgba(15,23,42,.05))}
.tools-search{position:relative;display:flex;align-items:center;flex:1 1 18rem;min-width:0}
.tools-search .bi{position:absolute;left:.85rem;color:var(--gs-tx2,#64748b);font-size:.95rem;pointer-events:none}
.tools-search input{width:100%;min-width:0;height:2.75rem;padding:0 .9rem 0 2.5rem;
  border:1px solid var(--gs-bd0,#e2e8f0);border-radius:10px;background:var(--gs-sf1,#f8fafc);
  font-size:.95rem;color:var(--gs-tx0,#111827)}
.tools-search input::placeholder{color:var(--gs-tx2,#94a3b8)}
.tools-search input:focus{outline:none;background:#fff;border-color:var(--gs-cp,#5b21b6);
  box-shadow:0 0 0 3px var(--gs-cp-s,rgba(124,58,237,.15))}
.tools-filter-controls{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem}
.tools-filter-go{display:none;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;
  border:1px solid var(--gs-bd0,#e2e8f0);border-radius:10px;background:var(--gs-cp,#5b21b6);color:var(--gs-cp-fg,#fff);cursor:pointer}

.tools-result-line{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;margin:0 0 1.25rem}
.tools-clear{display:inline-flex;align-items:center;gap:.35rem;font-size:.85rem;font-weight:600;
  color:var(--gs-cp,#5b21b6);text-decoration:none}
.tools-clear:hover{text-decoration:underline}

/* ── the grid ─────────────────────────────────────────────────────────────────────────── */
.tools-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}

/* ── the card ─────────────────────────────────────────────────────────────────────────── */
.gs-card-tool{display:flex;flex-direction:column;background:var(--gs-sf0,#fff);
  border:1px solid var(--gs-bd0,#e9edf3);border-radius:16px;padding:1.25rem 1.25rem 0;
  box-shadow:0 1px 2px rgba(15,23,42,.04);transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease}
.gs-card-tool:hover{box-shadow:0 12px 28px -16px rgba(15,23,42,.28);transform:translateY(-2px);
  border-color:var(--gs-cp-t,#ddd6fe)}
.gs-card-tool.is-featured{border-color:var(--gs-cp-t,#ddd6fe)}

.gs-ct-head{display:flex;align-items:flex-start;gap:.85rem}
.gs-ct-logo{flex:0 0 auto;width:3.25rem;height:3.25rem;border-radius:.9rem;display:flex;
  align-items:center;justify-content:center;color:#fff;font-size:1.35rem;font-weight:800;overflow:hidden}
.gs-ct-logo-img{width:100%;height:100%;object-fit:cover}
/* Per-PRODUCT identity colours, deterministic via tool_tone() so a tool looks the same everywhere.
   Not a UI accent — buttons, links and states stay brand purple. */
.gs-ct-logo[data-tone="0"]{background:linear-gradient(135deg,#7c3aed,#5b21b6)}
.gs-ct-logo[data-tone="1"]{background:linear-gradient(135deg,#8b5cf6,#6d28d9)}
.gs-ct-logo[data-tone="2"]{background:linear-gradient(135deg,#3b82f6,#1d4ed8)}
.gs-ct-logo[data-tone="3"]{background:linear-gradient(135deg,#22c55e,#15803d)}
.gs-ct-logo[data-tone="4"]{background:linear-gradient(135deg,#f97316,#ea580c)}
.gs-ct-logo[data-tone="5"]{background:linear-gradient(135deg,#ec4899,#be185d)}
.gs-ct-logo[data-tone="6"]{background:linear-gradient(135deg,#14b8a6,#0f766e)}
.gs-ct-logo[data-tone="7"]{background:linear-gradient(135deg,#0ea5e9,#0369a1)}
.gs-ct-logo[data-tone="8"]{background:linear-gradient(135deg,#eab308,#a16207)}
.gs-ct-logo[data-tone="9"]{background:linear-gradient(135deg,#6366f1,#4338ca)}
.gs-ct-logo[data-tone="10"]{background:linear-gradient(135deg,#06b6d4,#0e7490)}
.gs-ct-logo[data-tone="11"]{background:linear-gradient(135deg,#a855f7,#7e22ce)}

.gs-ct-id{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .5rem}
.gs-ct-name{margin:0;font-family:var(--gs-fd);font-size:1.02rem;font-weight:700;line-height:1.3;
  color:var(--gs-tx0,#111827);display:flex;align-items:center;gap:.4rem;min-width:0}
.gs-ct-name a{color:inherit;text-decoration:none}
.gs-ct-name a:hover{color:var(--gs-cp,#5b21b6)}
.gs-ct-rank{font-size:.78rem;font-weight:800;color:var(--gs-tx2,#94a3b8)}
.gs-ct-rank.is-top{color:var(--gs-cp,#5b21b6)}

/* The badge takes its colour FROM ToolAvailability's own state colour, so the admin's state and the
   pill can never disagree. --tone is set inline per state; the tint is derived from it. */
.gs-ct-badge{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .5rem;border-radius:.4rem;
  font-size:.66rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
  color:var(--tone,#5b21b6);background:color-mix(in srgb,var(--tone,#5b21b6) 12%,#fff);
  border:1px solid color-mix(in srgb,var(--tone,#5b21b6) 24%,#fff)}
.gs-ct-badge .bi{font-size:.72rem}
/* Fallback for clients/browsers without color-mix — a readable tint rather than no background. */
@supports not (background:color-mix(in srgb,#000 10%,#fff)){
  .gs-ct-badge{background:#f5f3ff;border-color:#e9d5ff}
}
.gs-ct-badge-feat{--tone:#16a34a}

.gs-ct-save{flex:0 0 auto;margin-left:auto}
.gs-ct-save button{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;
  padding:0;border:0;border-radius:.5rem;background:transparent;color:var(--gs-tx2,#94a3b8);
  font-size:1rem;cursor:pointer;transition:color .15s ease,background .15s ease}
.gs-ct-save button:hover{color:var(--gs-cp,#5b21b6);background:var(--gs-cp-s,#f5f3ff)}

.gs-ct-cat{display:inline-block;margin-top:.85rem;font-size:.82rem;font-weight:600;
  color:var(--gs-cp,#5b21b6);text-decoration:none}
a.gs-ct-cat:hover{text-decoration:underline}

.gs-ct-desc{margin:.65rem 0 0;font-size:.9rem;line-height:1.6;color:var(--gs-tx1,#475569);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.gs-ct-meta{display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  flex-wrap:wrap;margin-top:1rem;padding-bottom:1rem}
.gs-ct-rating{display:inline-flex;align-items:center;gap:.35rem;min-width:0}
.gs-ct-stars{display:inline-flex;gap:.05rem;color:#f59e0b;font-size:.8rem;line-height:1}
.gs-ct-stars .bi-star{color:#e2e8f0}
.gs-ct-score{font-size:.86rem;font-weight:700;color:var(--gs-tx0,#111827)}
.gs-ct-count{font-size:.82rem;color:var(--gs-tx2,#94a3b8)}
.gs-ct-price{font-size:.9rem;font-weight:700;color:var(--gs-tx0,#111827);white-space:nowrap}
.gs-ct-price.is-free{color:#16a34a}
/* "billed yearly" sits under the figure so the rate is never presented as the monthly-billed price
   — the annual rate is genuinely lower, and saying which one it is costs one small line. */
.gs-ct-price{display:inline-flex;flex-direction:column;align-items:flex-end;line-height:1.25;cursor:help}
.gs-ct-price-note{font-size:.66rem;font-weight:600;color:var(--gs-tx2,#94a3b8);letter-spacing:.01em}

.gs-ct-foot{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:auto;
  padding:.9rem 0;border-top:1px solid var(--gs-bd0,#eef2f7)}
.gs-ct-more{display:inline-flex;align-items:center;gap:.4rem;font-size:.88rem;font-weight:700;
  color:var(--gs-cp,#5b21b6);text-decoration:none}
.gs-ct-more:hover{gap:.6rem}
.gs-ct-more .bi{transition:transform .15s ease}
.gs-ct-more:hover .bi{transform:translateX(2px)}
.gs-ct-visit{margin-left:auto;display:inline-flex;align-items:center;gap:.35rem;font-size:.85rem;
  font-weight:600;color:var(--gs-tx1,#475569);text-decoration:none}
.gs-ct-visit:hover{color:var(--gs-cp,#5b21b6)}

/* ── pagination ───────────────────────────────────────────────────────────────────────── */
.tools-pagination{display:flex;align-items:center;justify-content:center;gap:.5rem;margin:2.5rem 0 1rem}
.tools-pagination .gs-page-btn{display:inline-flex;align-items:center;justify-content:center;
  min-width:2.5rem;height:2.5rem;padding:0 .6rem;border-radius:999px;border:1px solid var(--gs-bd0,#e2e8f0);
  background:#fff;color:var(--gs-tx1,#475569);font-weight:600;font-size:.9rem;text-decoration:none}
.tools-pagination .gs-page-btn:hover{border-color:var(--gs-cp,#5b21b6);color:var(--gs-cp,#5b21b6)}
.tools-pagination .gs-page-btn.is-active{background:var(--gs-cp,#5b21b6);border-color:var(--gs-cp,#5b21b6);color:var(--gs-cp-fg,#fff)}
.tools-pagination .gs-page-nav{width:2.5rem;padding:0}
/* A disabled arrow is rendered, not removed — the control row keeps its shape on page 1 and the
   last page instead of shifting sideways. */
.tools-pagination .gs-page-btn.is-disabled{opacity:.4;pointer-events:none}

/* ── responsive ───────────────────────────────────────────────────────────────────────── */
@media (min-width:576px){
  .tools-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:992px){
  .tools-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tools-hero-grid{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
  .tools-hero-art{display:block}
}
@media (max-width:767.98px){
  .tools-hero{padding:2rem 0 1.75rem}
  .tools-hero-stats{gap:.5rem}
  .tools-stat{flex:1 1 7rem;padding:.6rem .75rem}
  .tools-stat-num{font-size:1.15rem}
  .tools-filter-bar{padding:.75rem;gap:.6rem}
  .tools-search{flex:1 1 100%}
  .tools-filter-controls{width:100%;gap:.5rem}
  /* Each select takes an equal share of the row instead of overflowing it. */
  .tools-filter-controls .tools-select-wrap{flex:1 1 8rem;min-width:0}
  .tools-filter-controls .tools-select{width:100%}
}
@media (max-width:575.98px){
  .tools-hero-h1{font-size:1.75rem}
  .tools-hero-lead{font-size:.97rem}
  .tools-stat{flex:1 1 calc(50% - .25rem);max-width:none}
  .tools-filter-controls .tools-select-wrap{flex:1 1 100%}
  .tools-filter-go{display:inline-flex;flex:0 0 auto}
  /* 44px minimum tap targets on touch. */
  .tools-search input,.tools-filter-controls .tools-select{height:2.75rem}
  .gs-card-tool{padding:1rem 1rem 0}
  .gs-ct-logo{width:2.75rem;height:2.75rem;font-size:1.15rem}
  .gs-ct-save button{width:2.75rem;height:2.75rem}
  .tools-pagination .gs-page-btn{min-width:2.75rem;height:2.75rem}
  /* The card's primary action needs a real hit area, not just the height of its text (21px). */
  .gs-ct-foot{padding:.35rem 0}
  .gs-ct-more,.gs-ct-visit{min-height:2.75rem;display:inline-flex;align-items:center}
}

/* ── dark mode ────────────────────────────────────────────────────────────────────────── */
html[data-theme="dark"] .gs-card-tool{background:var(--gs-sf0,#111827);border-color:rgba(255,255,255,.08)}
html[data-theme="dark"] .tools-filter-bar{background:var(--gs-sf0,#111827);border-color:rgba(255,255,255,.08)}
html[data-theme="dark"] .tools-search input{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)}
html[data-theme="dark"] .tools-art-tile{background:#111827;border-color:rgba(255,255,255,.1)}
html[data-theme="dark"] .tools-pagination .gs-page-btn{background:transparent;border-color:rgba(255,255,255,.12)}
html[data-theme="dark"] .gs-ct-stars .bi-star{color:rgba(255,255,255,.18)}

/* Merged Settings page (2026-08-16): group headings inside the section nav.
   ⚠ The nav now carries BOTH halves — "My account" (personal preferences) and "Workspace" (what used
   to be a second sidebar item called Business Settings). The headings are what stop "Security" and
   "Notifications" reading ambiguously now that personal and workspace sections share one list. */
.biz-nav-group{padding:.85rem .75rem .3rem;font-size:.6875rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gs-tx2,#64748b);opacity:.85}
.biz-nav-group:first-child{padding-top:.25rem}

/* "billed yearly" under the hero figure. The headline is a per-month number for a yearly
   commitment, so this line is what makes it honest — see the note in tool.php. */
.gs-th-per {
  font-size: .75rem;
  color: var(--gs-tx2, #64748b);
  margin-top: .15rem;
  letter-spacing: .01em;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   DARK MODE — CONTRAST REPAIRS
   Every rule here fixes a measured WCAG AA failure, at the element that originates the colour
   rather than at each place it lands. Ratios in the comments are against the surface each one
   actually sits on, measured on the live page.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Body text was #111827 on a #111420 page — ratio 1.03, i.e. invisible, and inherited by 23
   elements. The framework already sets body from --gs-text-primary; this restates it at a
   specificity nothing else outranks, so it cannot be lost again to a late-loading sheet. */
[data-theme="dark"] body { color: var(--gs-text-primary, #F0F2F8); }

/* Hardcoded light-grey copy that never had a dark counterpart (footer, billing toggle). */
[data-theme="dark"] .gs-footer-copy,
[data-theme="dark"] .gs-footer-copy a,
[data-theme="dark"] .gs-footer-legal a,
[data-theme="dark"] .gs-ptog-opt { color: var(--gs-text-secondary, #B4BAD0); }

/* #5B21B6 is the LIGHT brand purple; on a dark surface it reads at 2.04. The dark palette's own
   --gs-cp-t (#C4B5FD) is the intended colour — these rules just make sure it is the one that wins. */
[data-theme="dark"] .gs-btn-outline,
[data-theme="dark"] .gs-btn-outline:hover:not(:disabled),
[data-theme="dark"] .gs-faq-q,
[data-theme="dark"] .gs-footer-pay-more,
[data-theme="dark"] .gs-footer-pay-more:hover { color: var(--gs-cp-t, #C4B5FD); }

/* The HOT pill: white on solid orange measured 2.8. Darkening the chip lifts it past AA without
   losing the "hot" reading. */
[data-theme="dark"] .gs-nav-pill-hot { background: #9A3412; color: #FFF7ED; }

/* The Save pill's own green on a 15% green tint sat at 1.59. A lighter green on the same tint
   keeps the colour language and clears AA. */
[data-theme="dark"] .gs-save-pill { color: #BBF7D0; }
/* The bottom-bar legal links: #6B7280 measured 4.09 on the dark footer. Same hardcode as
   .gs-footer-legal above, different class — both now use the token. */
[data-theme="dark"] .gs-footer-legal-links a { color: var(--gs-text-secondary, #B4BAD0); }

/* ── Homepage product mock-ups ─────────────────────────────────────────────────────────────────
   Measured dark-mode failures in the decorative hero/section mocks. Each is fixed on the side that
   actually broke — see the notes per rule. */

/* A. Chips that hardcode a white surface but take their text from the theme: in dark the text
      lightened and the chip did not (1.93 and 2.72). They are meant to be white on a dark hero, so
      the text is pinned back to the light palette rather than the surface being redesigned. */
/* (.gs-hint-chip was pinned to a dark text here; theming its surface below supersedes that and
   also fixes its hover state, which sets the text to the brand colour.) */
[data-theme="dark"] .gs-feat-promo-btn,
[data-theme="dark"] .gs-feat-promo-btn:hover { color: #5B21B6; }

/* B. The reverse: light-palette text on a surface that DID theme. The orders mock's labels are
      inline hex (a single colour cannot clear AA on both white and #111420 — the luminance windows
      do not overlap), so each row now carries a --cd for dark and this reads it. */
.gs-dboard-ostat .lbl { color: var(--c, inherit); }
[data-theme="dark"] .gs-dboard-ostat .lbl { color: var(--cd, var(--c, inherit)); }

/* Same shape: #15803d is a light-mode green sitting on dark cards (2.81 and 3.04). */
[data-theme="dark"] .gs-tmwk-role-pill.alt,
[data-theme="dark"] .gs-testi-verified { color: #4ADE80; }

/* C. Not dark-mode bugs — these fail in BOTH themes and are corrected outright. The terminal is
      hardcoded #0b1020 in either theme, so its dim text was always at 3.98; the LIVE badge was
      white on #16A34A at 3.30. */
.gs-api-term .t-dim { color: #94A3B8; }
.gs-dash-titlebar-badge { background: #15803D; }
/* ── Surfaces that hardcode white ──────────────────────────────────────────────────────────────
   These paint `background:#fff` but take their border and text from the theme, so in dark mode
   everything switched except the surface — measured 1.93 to 3.02 across chips, tabs, inputs, stat
   cards and pagination. --gs-surface-1 is the token they should have used (#FFFFFF / #111420).

   ⚠ Deliberately NOT included: .gs-btn-white (white by design, for dark sections), .dci-qr-box (a
   QR must stay dark-on-light to scan), .dci-toggle-dot, .gs-dboard-prog i, .gs-tmwk-ava.cust,
   .dci-sg-badge and .gs-feat-promo-btn. */
[data-theme="dark"] .gs-hs-input,
[data-theme="dark"] .gs-hint-chip,
[data-theme="dark"] .gs-subcat-chip,
[data-theme="dark"] .gs-blog-tabs a,
[data-theme="dark"] .gs-blog-tab,
[data-theme="dark"] .gs-plan-arrow,
[data-theme="dark"] .tools-hero-eyebrow,
[data-theme="dark"] .tools-stat,
[data-theme="dark"] .tools-art-tile,
[data-theme="dark"] .tools-search input:focus,
[data-theme="dark"] .tools-pagination .gs-page-btn,
[data-theme="dark"] .dom-transfer-steps .n,
[data-theme="dark"] .dci-sg-add,
[data-theme="dark"] .dci-ac-list,
[data-theme="dark"] .dci-auth-field input,
[data-theme="dark"] .dci-auth-field select { background: var(--gs-surface-1, #111420); }

/* The active states of those chips and pagination buttons paint the brand colour as their surface,
   so they keep their own foreground token rather than this one. */
[data-theme="dark"] .gs-subcat-chip.active,
[data-theme="dark"] .gs-blog-tabs a.active,
[data-theme="dark"] .gs-blog-tab.active,
[data-theme="dark"] .tools-pagination .gs-page-btn.is-active { background: var(--gs-cp); }
/* ══════════════════════════════════════════════════════════════════════════════
   DOMAIN CART — upsell tabs + hosting add-ons ("Complement your order" panel)
   Admin-controlled via Admin → Domain Registrar → Upsell. Tokens flip per theme.
   ══════════════════════════════════════════════════════════════════════════════ */
.dci-tabs{display:flex;gap:.35rem;background:var(--gs-sf2,#f1f5f9);border-radius:10px;padding:.25rem;margin-bottom:.7rem}
.dci-tab{flex:1;border:0;background:transparent;border-radius:8px;padding:.45rem .5rem;font-weight:700;font-size:.85rem;color:var(--gs-tx1,#475569);cursor:pointer}
.dci-tab.on{background:var(--gs-surface-1,#fff);color:var(--gs-cp,#5b21b6);box-shadow:0 1px 3px rgba(2,6,23,.12)}
.dci-sg-spec{font-size:.72rem;color:var(--gs-tx2,#64748b);margin-top:.1rem}
.dci-sg-sub{display:block;font-size:.68rem;font-weight:500;color:var(--gs-tx2,#64748b);text-align:right}
.dci-sg-host .dci-sg-main{cursor:pointer}
.dci-sg-host.is-on{border-color:var(--gs-cp,#5b21b6);background:var(--gs-cp-s,#f5f3ff)}
/* Billing-term chips shown under the selected package — yearly (default) vs monthly. */
.dci-term{display:flex;gap:.45rem;margin:-.15rem 0 .55rem}
.dci-term-chip{flex:1;border:1px solid var(--gs-bd0,#e2e8f0);background:var(--gs-surface-1,#fff);border-radius:9px;padding:.4rem .5rem;font-size:.76rem;font-weight:600;color:var(--gs-tx1,#475569);cursor:pointer}
.dci-term-chip.on{border-color:var(--gs-cp,#5b21b6);color:var(--gs-cp,#5b21b6);background:var(--gs-cp-s,#f5f3ff);font-weight:700}
.dci-term-chip em{font-style:normal;color:var(--gs-cs,#3d8b37);font-weight:700}