:root {
  /* Brand Core Palette */
  --gemz-navy-dark: #05070C;
  --gemz-navy-base: #0B1220;
  --gemz-navy-light: #1E3A6E;

  --gemz-blue-primary: #2F6FED;
  --gemz-blue-hover: #2559C4;

  --gemz-purple-accent: #7C3AED;
  --gemz-cyan-accent: #4FD1F9;
  --gemz-red-accent: #DC2626;

  /* Neutral Palette */
  --gemz-bg-light: #F4F7FB;
  --gemz-card-light: #FFFFFF;
  --gemz-text-dark: #0B1220;
  --gemz-text-muted: #64748B;
  --gemz-border-light: #E2E6EA;

  /* Dark Glassmorphism & UI Tokens */
  --gemz-dark-card-bg: rgba(11, 18, 32, 0.75);
  --gemz-dark-card-border: rgba(79, 209, 249, 0.15);
  --gemz-glass-glow: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(124, 58, 237, 0.15), rgba(79, 209, 249, 0.05) 40%, transparent 80%);

  /* Typography */
  --font-heading: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing & Radii */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 9999px;

  --shadow-subtle: 0 4px 20px -2px rgba(11, 18, 32, 0.05);
  --shadow-floating: 0 20px 40px -15px rgba(11, 18, 32, 0.25);
  --shadow-glow: 0 0 30px -5px rgba(47, 111, 237, 0.4);
}

/* Base resets & typography bindings */
body {
  font-family: var(--font-body);
  color: var(--gemz-text-dark);
  background-color: var(--gemz-bg-light);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6, .gemz-font-heading {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Readability/typography pass: a deliberate type scale for h1-h6 so every
   page gets consistent sizing and generous, readable line-height instead of
   the browser's own (wildly inconsistent) heading defaults or one-off
   per-component sizes. Modeled on Referral Rock's clean, high-contrast
   heading hierarchy - large display sizes get tighter tracking and more
   line-height room to breathe when they wrap to multiple lines; smaller
   headings stay closer to body tracking. Component classes below (hero
   title, card/widget headings) keep their own explicit overrides where a
   size genuinely needs to differ from this default scale. */
h1 { font-size: 44px; line-height: 1.15; letter-spacing: -0.03em; }
h2 { font-size: 34px; line-height: 1.2; letter-spacing: -0.025em; }
h3 { font-size: 24px; line-height: 1.25; letter-spacing: -0.015em; }
h4 { font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; }
h5, h6 { font-size: 16px; line-height: 1.4; letter-spacing: normal; }

@media (max-width: 768px) {
  h1 { font-size: 32px; }
  h2 { font-size: 26px; }
  h3 { font-size: 21px; }
}

/* Body-copy paragraphs (as opposed to UI chrome like nav links, buttons,
   or table cells, which intentionally stay smaller) read best at a
   consistent 16px/1.6 - matches the comfortable reading size and line
   height used site-wide for body text generally. */
p { font-size: 16px; line-height: 1.6; }
/* ==========================================================================
   1. GLOBAL LAYOUT & CONTAINER CONTAINMENT
   ========================================================================== */
.gemz-container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

.gemz-section {
  padding: 80px 0;
  position: relative;
}

.gemz-section.light { background-color: var(--gemz-bg-light); }
.gemz-section.white { background-color: var(--gemz-card-light); }
.gemz-section.dark-gradient {
  background: linear-gradient(135deg, var(--gemz-navy-dark) 0%, var(--gemz-navy-base) 100%);
  color: #FFFFFF;
}

/* Grids */
.gemz-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px;
  margin-top: 48px;
}

.gemz-split-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: center;
}

@media (max-width: 992px) {
  .gemz-split-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ==========================================================================
   2. HEADER & NAVIGATION SYSTEM (standalone .gemz-header markup, unused in
   the hybrid approach actually wired on this site - see section 8 below for
   the Blocksy-native equivalent that IS live. Kept here in case a page ever
   needs the raw component, e.g. inside a Custom HTML block.)
   ========================================================================== */
.gemz-header {
  background-color: var(--gemz-navy-base);
  border-bottom: 1px solid rgba(226, 230, 234, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 16px 0;
}

.gemz-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.gemz-brand-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.gemz-logo-icon {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--gemz-blue-primary), var(--gemz-purple-accent));
  border-radius: var(--radius-sm);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.4);
}

.gemz-logo-text {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.03em;
}

.gemz-logo-dot { color: var(--gemz-cyan-accent); }

.gemz-nav-menu {
  display: flex;
  align-items: center;
  gap: 28px;
}

.gemz-nav-link {
  color: #CBD5E1;
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  transition: color 0.2s ease;
}

.gemz-nav-link:hover { color: var(--gemz-cyan-accent); }

/* Dropdown */
.gemz-dropdown-wrapper { position: relative; }
.gemz-dropdown-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}
.gemz-dropdown-chevron { font-size: 10px; margin-left: 4px; }

.gemz-dropdown-menu {
  position: absolute;
  top: 100%;
  left: -20px;
  width: 290px;
  background: var(--gemz-navy-base);
  border: 1px solid var(--gemz-dark-card-border);
  border-radius: var(--radius-md);
  padding: 12px;
  box-shadow: var(--shadow-floating);
  display: none;
  flex-direction: column;
  gap: 4px;
  margin-top: 12px;
}

.gemz-dropdown-wrapper:hover .gemz-dropdown-menu { display: flex; }

.gemz-dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  text-decoration: none;
  color: #FFFFFF;
  border-radius: var(--radius-sm);
  transition: background 0.2s ease;
}

.gemz-dropdown-item:hover { background: rgba(255, 255, 255, 0.06); }
.gemz-dropdown-item strong { display: block; font-size: 14px; }
.gemz-dropdown-item span { font-size: 12px; color: var(--gemz-text-muted); }

.gemz-header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* ==========================================================================
   3. HERO PANELS & CARDS
   ========================================================================== */
.gemz-hero-panel {
  background: radial-gradient(circle at 80% 20%, var(--gemz-navy-light) 0%, var(--gemz-navy-dark) 70%);
  color: #FFFFFF;
  padding: 90px 0 100px;
  position: relative;
  overflow: hidden;
}

.gemz-hero-panel.compact { padding: 60px 0 70px; }

.gemz-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 50px;
  align-items: center;
}

@media (max-width: 992px) {
  .gemz-hero-grid { grid-template-columns: 1fr; }
}

.gemz-hero-title {
  font-size: 52px;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin: 16px 0 24px;
  color: #FFFFFF;
}

@media (max-width: 768px) {
  .gemz-hero-title { font-size: 36px; }
}

.gemz-text-gradient {
  background: linear-gradient(135deg, var(--gemz-cyan-accent), var(--gemz-blue-primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gemz-hero-subtitle {
  font-size: 18px;
  color: #94A3B8;
  max-width: 560px;
  margin-bottom: 32px;
}

/* Glassmorphism Card Wrapper for Shortcodes */
.gemz-hero-widget-card, .gemz-split-form-card {
  background: var(--gemz-dark-card-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--gemz-dark-card-border);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-floating);
}

.gemz-widget-header {
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 16px;
}

.gemz-widget-header h3 {
  font-size: 20px;
  color: #FFFFFF;
  margin: 0 0 6px 0;
}

.gemz-widget-header p {
  font-size: 14px;
  color: var(--gemz-text-muted);
  margin: 0;
}

/* ==========================================================================
   4. BUTTONS, BADGES & ICON GLOSS
   ========================================================================== */
.gemz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: all 0.25s ease;
  cursor: pointer;
  border: none;
}

.gemz-btn-primary {
  background: linear-gradient(135deg, var(--gemz-blue-primary), var(--gemz-blue-hover));
  color: #FFFFFF;
  box-shadow: var(--shadow-glow);
}

.gemz-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 35px rgba(47, 111, 237, 0.6);
}

.gemz-btn-ghost {
  background: transparent;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.gemz-btn-ghost:hover {
  border-color: var(--gemz-cyan-accent);
  color: var(--gemz-cyan-accent);
}

/* Icon Badges (Glossy Rounded Square) */
.gemz-icon-badge {
  width: 54px;
  height: 54px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: #FFFFFF;
  position: relative;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), var(--shadow-subtle);
  margin-bottom: 20px;
}

.gemz-icon-badge.mini {
  width: 36px;
  height: 36px;
  font-size: 16px;
  margin-bottom: 0;
  border-radius: var(--radius-sm);
}

.gemz-icon-badge.blue { background: linear-gradient(135deg, var(--gemz-blue-primary), #1E40AF); }
.gemz-icon-badge.purple { background: linear-gradient(135deg, var(--gemz-purple-accent), #5B21B6); }
.gemz-icon-badge.cyan { background: linear-gradient(135deg, var(--gemz-cyan-accent), #0284C7); }
.gemz-icon-badge.red { background: linear-gradient(135deg, var(--gemz-red-accent), #991B1B); }

/* Urgency & Trust Chips */
.gemz-chip-urgency {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: rgba(47, 111, 237, 0.12);
  border: 1px solid rgba(79, 209, 249, 0.3);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  color: var(--gemz-cyan-accent);
}

.gemz-chip-urgency.purple {
  background: rgba(124, 58, 237, 0.15);
  border-color: rgba(124, 58, 237, 0.4);
  color: #DDD6FE;
}

.gemz-chip-dot {
  width: 8px;
  height: 8px;
  background-color: var(--gemz-cyan-accent);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--gemz-cyan-accent);
}

/* ==========================================================================
   5. CARDS, TABLES & CONTENT BLOCKS
   ========================================================================== */
.gemz-card-feature, .gemz-card-white {
  background: var(--gemz-card-light);
  border: 1px solid var(--gemz-border-light);
  border-radius: var(--radius-md);
  padding: 36px 28px;
  box-shadow: var(--shadow-subtle);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.gemz-card-feature:hover, .gemz-card-white:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-floating);
}

.gemz-card-feature h3, .gemz-card-white h3 {
  font-size: 20px;
  margin: 0 0 12px 0;
  color: var(--gemz-navy-base);
}

.gemz-card-feature p, .gemz-card-white p {
  color: var(--gemz-text-muted);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}

/* Skepticism Comparison Table */
.gemz-skeptic-box {
  background: var(--gemz-bg-light);
  border: 1px solid var(--gemz-border-light);
  border-radius: var(--radius-lg);
  padding: 48px;
}

.gemz-skeptic-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 36px;
}

.gemz-comparison-table-wrapper { overflow-x: auto; }

.gemz-comparison-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--gemz-card-light);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-subtle);
}

.gemz-comparison-table th {
  background: var(--gemz-navy-base);
  color: #FFFFFF;
  font-family: var(--font-heading);
  padding: 18px 24px;
  text-align: left;
  font-size: 15px;
  width: 50%;
}

.gemz-comparison-table td {
  padding: 20px 24px;
  border-bottom: 1px solid var(--gemz-border-light);
  font-size: 14px;
  color: #334155;
  vertical-align: top;
}

.gemz-comparison-table td:last-child {
  background: rgba(47, 111, 237, 0.03);
  font-weight: 500;
  color: var(--gemz-navy-base);
}

/* Legal/Honesty Disclaimer Box */
.gemz-disclaimer-box {
  display: flex;
  gap: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-top: 28px;
}

.gemz-disclaimer-box p {
  font-size: 13px;
  color: #94A3B8;
  margin: 0;
  line-height: 1.5;
}

/* ==========================================================================
   6. SHORTCODE OVERRIDES (FOR GEMZ-REFERRAL-CRM PLUGIN OUTPUT)
   ========================================================================== */
/* The agent-signup/portal shortcodes render their own older markup
   (.gemz-portal > .gemz-payment-form, from assets/css/agent-portal.css,
   predates this theme file) - that stylesheet loads AFTER this one, so
   every rule below needs !important to actually win, same lesson as the
   Blocksy header overrides. Without it, inputs fell back to
   .gemz-payment-form's plain gray/white styling - which is what made
   "Full Name" look different from Email/Password in practice: those two
   only looked different because the browser's own autofill highlight was
   painted on top of that same fallback gray, not because of any real
   difference between the fields. */
.gemz-shortcode-embed .gemz-payment-form,
.gemz-shortcode-embed .gemz-portal {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.gemz-shortcode-embed .gemz-payment-form label {
  color: #E7EBF3 !important;
}

/* Form Inputs */
.gemz-shortcode-embed input[type="text"],
.gemz-shortcode-embed input[type="email"],
.gemz-shortcode-embed input[type="password"],
.gemz-shortcode-embed select {
  width: 100%;
  height: 48px;
  background: rgba(11, 18, 32, 0.6) !important;
  border: 1px solid rgba(226, 230, 234, 0.2) !important;
  border-radius: var(--radius-sm);
  padding: 0 16px;
  color: #FFFFFF !important;
  font-family: var(--font-body);
  font-size: 15px;
  box-sizing: border-box;
  margin-bottom: 16px;
  transition: border-color 0.2s ease;
}

.gemz-shortcode-embed input:focus,
.gemz-shortcode-embed select:focus {
  outline: none;
  border-color: var(--gemz-cyan-accent) !important;
  box-shadow: 0 0 10px rgba(79, 209, 249, 0.2);
  background: rgba(11, 18, 32, 0.6) !important;
}

.gemz-shortcode-embed button,
.gemz-shortcode-embed input[type="submit"] {
  width: 100%;
  height: 50px;
  background: linear-gradient(135deg, var(--gemz-blue-primary), var(--gemz-blue-hover)) !important;
  color: #FFFFFF !important;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  border: none !important;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: var(--shadow-glow);
}

.gemz-shortcode-embed button:hover,
.gemz-shortcode-embed input[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 35px rgba(47, 111, 237, 0.6);
}

/* Light Theme Overrides for Dashboard Embeds */
.gemz-section.light .gemz-shortcode-embed input,
.gemz-section.light .gemz-shortcode-embed select {
  background: #FFFFFF !important;
  border-color: var(--gemz-border-light) !important;
  color: var(--gemz-text-dark) !important;
}

/* ==========================================================================
   7. FOOTER STYLING
   ========================================================================== */
.gemz-footer {
  background-color: var(--gemz-navy-dark);
  color: #94A3B8;
  padding: 80px 0 36px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.gemz-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 60px;
}

@media (max-width: 992px) {
  .gemz-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 576px) {
  .gemz-footer-grid { grid-template-columns: 1fr; }
}

.gemz-footer-col h4 {
  color: #FFFFFF;
  font-size: 16px;
  margin: 0 0 20px 0;
}

.gemz-footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.gemz-footer-col li { margin-bottom: 12px; }

.gemz-footer-col a {
  color: #94A3B8;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s ease;
}

.gemz-footer-col a:hover { color: var(--gemz-cyan-accent); }

.gemz-footer-desc {
  font-size: 14px;
  line-height: 1.6;
  margin: 20px 0;
  max-width: 320px;
}

.gemz-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 13px;
}

.gemz-disclaimer-sm {
  font-size: 12px;
  color: #64748B;
  line-height: 1.5;
}

/* ==========================================================================
   8. BLOCKSY-NATIVE HEADER INTEGRATION (hybrid approach actually wired live)
   Restyles Blocksy's own header/menu/button markup to match the system
   above, instead of replacing the header with static HTML - this keeps the
   header's nav menu driven by the real WordPress menu (Appearance > Menus /
   Customize > Header > Menu 1), so future menu edits keep working normally.
   ========================================================================== */
#header.ct-header,
#header.ct-header > div,
#header.ct-header [data-row] {
  background-color: var(--gemz-navy-base) !important;
  border-bottom: 1px solid rgba(226, 230, 234, 0.1);
}

#header.ct-header .ct-menu-link {
  color: #CBD5E1 !important;
  font-family: var(--font-body);
  font-weight: 500;
  transition: color 0.2s ease;
}

#header.ct-header .ct-menu-link:hover,
#header.ct-header .ct-menu-link:focus {
  color: var(--gemz-cyan-accent) !important;
}

/* Site title/logo text and search icon also need to read against the now-dark bar */
#header.ct-header .ct-header-logo,
#header.ct-header .ct-header-logo a,
#header.ct-header .site-title,
#header.ct-header .site-title a {
  color: #FFFFFF !important;
}

#header.ct-header svg,
#header.ct-header .ct-icon-search-1 {
  color: #CBD5E1 !important;
  fill: #CBD5E1 !important;
}

/* Dropdown panel (Blocksy's own "Services" submenu) */
#header.ct-header .sub-menu {
  background: var(--gemz-navy-base) !important;
  border: 1px solid var(--gemz-dark-card-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-floating);
  padding: 8px;
}

#header.ct-header .sub-menu .menu-item > .ct-menu-link {
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

#header.ct-header .sub-menu .menu-item > .ct-menu-link:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* Native Button elements used for "Agent Sign In" (ghost) / "Get Cash Back"
   (primary) - add the matching class in the Customizer's Button element
   settings (Design tab -> Additional CSS Class(es)): gemz-btn-ghost or
   gemz-btn-primary. Falls back to Blocksy's own button markup otherwise. */
#header.ct-header .ct-button.gemz-btn-primary {
  background: linear-gradient(135deg, var(--gemz-blue-primary), var(--gemz-blue-hover));
  color: #FFFFFF;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-glow);
  border: none;
  font-family: var(--font-heading);
  font-weight: 600;
}

#header.ct-header .ct-button.gemz-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 35px rgba(47, 111, 237, 0.6);
}

#header.ct-header .ct-button.gemz-btn-ghost {
  background: transparent;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-weight: 600;
}

#header.ct-header .ct-button.gemz-btn-ghost:hover {
  border-color: var(--gemz-cyan-accent);
  color: var(--gemz-cyan-accent);
}

/* Footer: WordPress "Custom HTML" widget carries the .gemz-footer markup
   verbatim (see rollout notes), so no Blocksy-specific override needed here
   beyond making sure the widget area itself has no extra theme padding. */
.ct-footer .widget {
  padding: 0;
  margin: 0;
}

/* Pages built entirely on this component system carry their own H1 inside
   .gemz-hero-panel / a .gemz-section - hide Blocksy's own page-title header
   on those pages only, so there's no duplicate heading. Intentionally NOT
   scoped to :first-child - an SEO meta-description paragraph (visually
   hidden, see the pages' own content) is often the true first child, so
   this just checks the page uses this component system at all. Blog posts
   (which never use these classes) keep the theme's title as normal. */
body:has(.entry-content > .gemz-hero-panel) .entry-header,
body:has(.entry-content > .gemz-section) .entry-header {
  display: none !important;
}