/* ─── WP Job Monetizer Page ─────────────────────────────────────────────── */

/* Hero */
.jm-hero { position: relative; overflow: hidden; }
.jm-hero-inner { display: flex; align-items: center; gap: 60px; padding: 80px 0 60px; }
.jm-hero-content { flex: 1; }
.jm-hero-media { flex: 1; text-align: center; }
.jm-hero-media img { max-width: 100%; border-radius: 16px; border: 2px solid #000; box-shadow: 6px 6px 0px 0px #000; }

.jm-plugin-badge { display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 2px solid #000; border-radius: 50px; padding: 8px 18px; margin-bottom: 24px; font-size: 14px; font-weight: 600; box-shadow: 3px 3px 0px 0px #000; }
.jm-plugin-badge img { width: 28px; height: 28px; border-radius: 6px; }

.jm-hero-btns { display: flex; align-items: center; gap: 16px; margin-top: 32px; flex-wrap: wrap; }
.jm-btn-primary { background: #0D47E2; color: #fff; padding: 14px 28px; display: inline-flex; align-items: center; gap: 10px; border: 2px solid #101828; border-radius: 10px; font-weight: 600; font-size: 16px; box-shadow: 4px 4px 0px 0px #101828; transition: 0.3s; text-decoration: none; }
.jm-btn-primary:hover { box-shadow: none; color: #fff; }
.jm-btn-secondary { background: #fff; color: #101828; padding: 14px 28px; display: inline-flex; align-items: center; gap: 10px; border: 2px solid #101828; border-radius: 10px; font-weight: 600; font-size: 16px; box-shadow: 4px 4px 0px 0px #101828; transition: 0.3s; text-decoration: none; }
.jm-btn-secondary:hover { box-shadow: none; color: #101828; }
.jm-free-tag { font-size: 13px; color: #555; margin-top: 12px; }
.jm-free-tag strong { color: #0D47E2; }

/* Section base */
.jm-section { padding: 80px 0; }
.jm-section-alt { background: #F6F6F6; }
.jm-section-navy { background: #002051; color: #fff; }
.jm-section-pink { background: #F15FAD; position: relative; overflow: hidden; }
.jm-section-pink::before { content: ""; background: url(/wp-content/uploads/2025/12/round-icon.svg) no-repeat; width: 250px; height: 250px; background-size: contain; position: absolute; top: 0; left: 0; pointer-events: none; }
.jm-section-pink::after  { content: ""; background: url(/wp-content/uploads/2025/12/plus-icon.png) no-repeat; background-size: contain; position: absolute; bottom: 0; right: 0; width: 370px; height: 169px; pointer-events: none; }

.jm-section-label { display: inline-block; background: #F15FAD; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 14px; border-radius: 6px; margin-bottom: 16px; border: 1px solid #101828; box-shadow: 2px 2px 0 #101828; }
.jm-section-head { font-size: 36px; font-weight: 800; line-height: 1.2; margin-bottom: 16px; }
.jm-section-sub {max-width: 600px; font-size: 20px; color: #101828; }
.jm-section-navy .jm-section-sub { color: rgba(255,255,255,0.75); }
.jm-section-center { text-align: center; }
.jm-section-center .jm-section-sub { margin: 0 auto; }
.jm-on-pink { color: #fff !important; }
.jm-on-pink-sub { color: rgba(255,255,255,0.85) !important; }

/* Cards */
.jm-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 48px; }
.jm-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 48px; }
.jm-card { background: #fff; border: 2px solid #000; border-radius: 16px; padding: 25px; box-shadow: 4px 4px 0px 0px #000; position: relative; z-index: 1; }
.jm-card-icon { font-size: 32px;margin-bottom: 16px; line-height: 1; width: 48px; height: 48px; background: #F15FAD1F; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;}
.jm-card-step {margin-bottom: 15px; line-height: 1; font-size: 14px; }
.jm-card-icon-box { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: rgba(241,95,173,0.12); border-radius: 12px; font-size: 24px; margin-bottom: 16px; }
.jm-card-title { font-size: 18px; font-weight: 700; margin-bottom: 8px; color: #000; }
.jm-card-text {font-size: 15px; line-height: 1.6; }

/* Monetization model */
.jm-earn-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; margin-top: 48px; }
.jm-earn-card { background: #fff; border: 2px solid #000; border-radius: 16px; padding: 36px; box-shadow: 4px 4px 0px 0px #000; position: relative; z-index: 1; }
.jm-earn-label {display: inline-block; font-size: 12px; text-transform: uppercase; background: transparent; color: #fff; padding: 4px 12px; border-radius: 14px; border: 1px solid #F15FAD; margin-bottom: 14px; line-height: 1; color: #F15FAD; font-weight: 600; }
.jm-earn-label.blue {border: 1px solid #0D47E2; color: #0D47E2; }
.jm-earn-title { font-size: 24px; font-weight: 800; margin-bottom: 12px; color: #000; }
.jm-earn-text { font-size: 15px; color: #555; line-height: 1.65; }
.jm-earn-badge {display: inline-block; margin-top: 20px; padding: 15px 20px; border: 2px solid #101828 ! IMPORTANT; box-shadow: 4px 4px 0px 0px #101828; background: #fff !important; color: #0d47e2 !important; font-weight: 600; border-radius: 12px; line-height: 1; }

/* Shortcode */
.jm-code-wrap { max-width: 760px; margin: 48px auto 0; }
.jm-code-group { margin-bottom: 20px; }
.jm-code-group:last-of-type { margin-bottom: 0; }
.jm-code-label {display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; color: #0D41E1; background: transparent; border: 1px solid #0D41E1; border-radius: 4px; padding: 8px 10px; margin-bottom: 8px; line-height: 1; }
.jm-code-block { background: #0a0f1e; border: 2px solid #000; border-radius: 12px; overflow: hidden; box-shadow: 4px 4px 0 #000; position: relative; }
.jm-code-block-bar { display: flex; align-items: center; gap: 7px; background: #1a2035; padding: 10px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.jm-code-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.jm-code-dot:nth-child(1) { background: #FF5F57; }
.jm-code-dot:nth-child(2) { background: #FEBC2E; }
.jm-code-dot:nth-child(3) { background: #28C840; }
.jm-code-block-body { display: flex; align-items: center; padding: 18px 20px; }
.jm-code-block-body code { font-family: 'Courier New', monospace !important; font-size: 14px !important; color: #7EE787 !important; background: transparent !important; border: none !important; padding: 0 !important; margin: 0 !important; word-break: break-all; flex: 1; line-height: 1.5; display: block; }
.jm-code-copy { flex-shrink: 0; margin-left: 16px; background: #0D47E2; border: 1px solid rgba(255,255,255,0.3); color: #fff; border-radius: 6px; padding: 6px 14px; font-size: 12px; cursor: pointer; transition: 0.2s; font-weight: 700; white-space: nowrap; }
.jm-code-copy:hover { background: #F15FAD; border-color: rgba(255,255,255,0.3); }
.jm-code-attrs { margin-top: 30px;  line-height: 2; text-align: center; }
.jm-code-attrs strong { color: #000; }
.jm-code-attr-tag {font-size: 12px; border: 1px solid #0D41E1; padding: 5px 10px; line-height: 1; display: inline-block; border-radius: 20px; font-weight: 600; color: #0D41E1;    margin: 3px 4px;}

/* Ideal for */
.jm-ideal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.jm-ideal-item { display: flex; align-items: center; gap: 14px; background: #fff; border: 2px solid #000; border-radius: 12px; padding: 18px 20px; box-shadow: 3px 3px 0 #000; font-weight: 600; font-size: 15px; color: #000;     position: relative;
    z-index: 1;}
.jm-ideal-icon { font-size: 24px; flex-shrink: 0; }

/* FAQ */
.jm-faq-list { margin-top: 48px; display: flex; flex-direction: column; gap: 20px; }
.jm-faq-item { border: 2px solid #000; border-radius: 16px; overflow: hidden; box-shadow: 4px 4px 0 0 #000; background: #fff; }
.jm-faq-q { width: 100%; background: #F15FAD; color: #fff; padding: 30px 42px 30px 25px; text-align: left; font-size: 20px; font-weight: 700; border: none; cursor: pointer; position: relative; font-family: 'Plus Jakarta Sans', sans-serif; line-height: 1.3; }
.jm-faq-q::after {content: ''; position: absolute; right: 20px; font-weight: 300; transition: 0.2s; background: url(https://artha.link/wp-content/uploads/2025/12/chevron-down-1.svg) no-repeat center center; width: 24px; height: 24px; filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(1%) hue-rotate(360deg) brightness(103%) contrast(101%); }
 .jm-faq-item.open .jm-faq-q::after {transform: rotate(-180deg); }
.jm-faq-a { display: none; padding: 20px 25px; font-size: 16px; line-height: 1.7; color: #333; }
.jm-faq-item.open .jm-faq-a { display: block; }

/* CTA Banner */
.jm-cta-inner { background: #0D47E2; border: 2px solid #000; border-radius: 24px; padding: 60px 40px; box-shadow: 6px 6px 0 #000; max-width: 760px; margin: 0 auto; text-align: center;     position: relative;    z-index: 1;}
.jm-stats-row { display: flex; justify-content: center; gap: 48px; margin-top: 40px; }
.jm-stat { text-align: center; }
.jm-stat-num { font-size: 36px; font-weight: 800; color: #fff; }
.jm-stat-label { font-size: 13px; color: rgba(255,255,255,0.75); margin-top: 4px; }

/**/
.jm-section-pink span.retro-banner {background: #6355F7; }
#how-it-works .jm-section-center, #monetization .jm-section-center, .jm-section-pink .jm-section-center {position: relative; }


/* Responsive */
@media (max-width: 1024px) {
  .jm-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .jm-hero-inner { gap: 40px; }
}

@media (max-width: 960px) {
 .jm-ideal-item {gap: 10px; padding: 15px 15px; line-height: 1.5; }
 .jm-section {padding: 60px 0; }
 .jm-section-sub {max-width: 550px; font-size: 18px;}
 .jm-earn-card { padding: 25px;}



}

@media (max-width: 767px) {
  .jm-hero-inner { flex-direction: column; padding: 50px 0 40px; }
  .jm-hero-media { order: -1; }
  .jm-hero-media img { max-width: 320px; }
  .jm-grid-3 { grid-template-columns: 1fr; }
  .jm-grid-2 { grid-template-columns: 1fr; }
  .jm-earn-grid { grid-template-columns: 1fr; }
  .jm-ideal-grid { grid-template-columns: repeat(2, 1fr); }
  .jm-section { padding: 50px 0; }
  .jm-section-head { font-size: 26px; }
  .jm-stats-row { gap: 24px; flex-wrap: wrap; }
  .jm-cta-inner { padding: 40px 24px; }
  .jm-faq-q { padding: 20px 42px 20px 20px;font-size: 18px;}
  .jm-section-pink::after { width: 220px; height: 99px;}
  .jm-section-pink::before {width: 130px; height: 130px;}

}
@media (max-width: 480px) {
  .jm-ideal-grid { grid-template-columns: 1fr; }
  .jm-hero-btns { flex-direction: column; align-items: flex-start; }
  .wrapper .neve-main .container {padding: 0 25px; }
  .jm-stat-num {font-size: 30px;}



}