/* ==============================
   PMG Help Center — Premium SaaS Design
   ============================== */

.pmg-help{
  --pmg-bg:#ffffff;
  --pmg-surface:#ffffff;
  --pmg-surface2:#f8f9fa;
  --pmg-surface3:#f1f3f5;
  --pmg-border:#e9ecef;
  --pmg-border-hover:#d0d7de;
  --pmg-text:#212529;
  --pmg-text-muted:#6c757d;
  --pmg-text-light:#868e96;
  --pmg-accent:#2563eb;
  --pmg-accent-hover:#1d4ed8;
  --pmg-accent-light:#e7f1ff;
  --pmg-success:#16a34a;
  --pmg-success-light:#dcfce7;
  --pmg-radius:12px;
  --pmg-radius-lg:16px;
  --pmg-shadow-sm:0 1px 2px rgba(0,0,0,.04);
  --pmg-shadow:0 4px 6px -1px rgba(0,0,0,.06), 0 2px 4px -1px rgba(0,0,0,.04);
  --pmg-shadow-md:0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -2px rgba(0,0,0,.04);
  --pmg-shadow-lg:0 20px 25px -5px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04);

  color:var(--pmg-text);
  background:#ffffff;
  padding:48px 0 64px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.6;
}

.pmg-help *{box-sizing:border-box;}

.pmg-help a{
  color:var(--pmg-accent);
  text-decoration:none;
  transition:color .15s ease;
}

.pmg-help a:hover{
  color:var(--pmg-accent-hover);
  text-decoration:underline;
  text-underline-offset:3px;
}

.pmg-help__container{
  width:min(1200px, calc(100% - 48px));
  margin:0 auto;
  padding:0 24px;
}

/* ---------- Header / Hero ---------- */
.pmg-help__hero{
  display:grid;
  grid-template-columns: 1.5fr .95fr;
  gap:32px;
  align-items:start;
  margin-bottom:48px;
}

.pmg-hero{
  border:1px solid var(--pmg-border);
  border-radius:var(--pmg-radius-lg);
  background:var(--pmg-surface);
  box-shadow:var(--pmg-shadow-sm);
  padding:40px 36px;
}

.pmg-hero__eyebrow{
  margin:0 0 12px;
  color:var(--pmg-text-muted);
  font-size:11px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.pmg-hero__title{
  margin:0 0 12px;
  font-size:42px;
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.025em;
  color:var(--pmg-text);
}

.pmg-hero__subtitle{
  margin:0 0 32px;
  color:var(--pmg-text-muted);
  font-size:16px;
  line-height:1.6;
  max-width:600px;
}

/* ---------- CTA Buttons ---------- */
.pmg-cta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:0 0 32px;
  align-items:center;
}

.pmg-btn{
  appearance:none;
  border:1.5px solid transparent;
  background:var(--pmg-surface);
  color:var(--pmg-text);
  padding:12px 20px;
  border-radius:var(--pmg-radius);
  font-weight:600;
  font-size:14px;
  line-height:1.4;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  box-sizing:border-box;
  text-decoration:none;
  white-space:nowrap;
  transition:all .2s ease;
  box-shadow:var(--pmg-shadow-sm);
}

.pmg-btn:hover{
  text-decoration:none;
  transform:translateY(-1px);
  box-shadow:var(--pmg-shadow);
}

.pmg-btn:active{
  transform:translateY(0);
  box-shadow:var(--pmg-shadow-sm);
}

/* Primary: Blue background, WHITE text (high contrast) */
.pmg-btn--primary{
  background:var(--pmg-accent);
  border-color:var(--pmg-accent);
  color:#ffffff !important;
  font-weight:600;
}

.pmg-btn--primary:hover{
  background:var(--pmg-accent-hover);
  border-color:var(--pmg-accent-hover);
  color:#ffffff !important;
  box-shadow:0 8px 16px rgba(37,99,235,.2);
}

.pmg-btn--primary *{
  color:#ffffff !important;
}

/* Soft: Light gray background, DARK text (high contrast) */
.pmg-btn--soft{
  background:var(--pmg-surface2);
  border-color:var(--pmg-border);
  color:var(--pmg-text);
  font-weight:600;
}

.pmg-btn--soft:hover{
  background:var(--pmg-surface3);
  border-color:var(--pmg-border-hover);
  color:var(--pmg-text);
}

/* Ghost: Transparent, BLUE border and text (high contrast) */
.pmg-btn--ghost{
  background:transparent;
  border-color:var(--pmg-accent);
  color:var(--pmg-accent);
  font-weight:600;
}

.pmg-btn--ghost:hover{
  background:var(--pmg-accent-light);
  border-color:var(--pmg-accent);
  color:var(--pmg-accent-hover);
}

/* ---------- Search ---------- */
.pmg-search{
  margin-top:0;
  display:grid;
  gap:8px;
}

.pmg-search label{
  font-size:13px;
  font-weight:500;
  color:var(--pmg-text);
}

.pmg-search input{
  width:100%;
  padding:14px 16px;
  border-radius:var(--pmg-radius);
  border:1.5px solid var(--pmg-border);
  background:var(--pmg-surface);
  color:var(--pmg-text);
  font-size:14px;
  outline:none;
  transition:all .15s ease;
  box-shadow:var(--pmg-shadow-sm);
}

.pmg-search input:focus{
  border-color:var(--pmg-accent);
  box-shadow:0 0 0 3px var(--pmg-accent-light), var(--pmg-shadow-sm);
}

.pmg-search input::placeholder{
  color:var(--pmg-text-light);
}

/* ---------- Side Card ---------- */
.pmg-side{
  border:1px solid var(--pmg-border);
  border-radius:var(--pmg-radius-lg);
  background:var(--pmg-surface);
  box-shadow:var(--pmg-shadow-sm);
  padding:32px 28px;
}

.pmg-side__title{
  margin:0 0 20px;
  font-size:16px;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--pmg-text);
}

.pmg-side__block{
  display:grid;
  gap:12px;
  margin-bottom:24px;
}

.pmg-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  padding:14px 16px;
  border:1px solid var(--pmg-border);
  border-radius:var(--pmg-radius);
  background:var(--pmg-surface2);
  transition:all .15s ease;
}

.pmg-row:hover{
  background:var(--pmg-surface3);
  border-color:var(--pmg-border-hover);
  box-shadow:var(--pmg-shadow-sm);
}

.pmg-row__label{
  font-size:12px;
  font-weight:500;
  color:var(--pmg-text-muted);
  text-transform:uppercase;
  letter-spacing:.05em;
}

.pmg-row__value{
  font-size:14px;
  font-weight:600;
  color:var(--pmg-accent);
}

.pmg-row__value a{
  color:var(--pmg-accent);
  font-weight:600;
}

.pmg-row__value a:hover{
  color:var(--pmg-accent-hover);
}

.pmg-mini{
  display:flex;
  gap:10px;
  align-items:center;
  font-size:12px;
  color:var(--pmg-text-muted);
  padding-top:20px;
  border-top:1px solid var(--pmg-border);
}

.pmg-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--pmg-success);
  flex-shrink:0;
}

/* ---------- Section Blocks ---------- */
.pmg-section{
  border:1px solid var(--pmg-border);
  border-radius:var(--pmg-radius-lg);
  background:var(--pmg-surface);
  box-shadow:var(--pmg-shadow-sm);
  padding:40px 36px;
  margin-top:32px;
}

.pmg-section__head{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:28px;
}

.pmg-section__title{
  margin:0;
  font-size:24px;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--pmg-text);
}

.pmg-section__sub{
  margin:0;
  color:var(--pmg-text-muted);
  font-size:15px;
  line-height:1.6;
}

/* ---------- FAQ ---------- */
.pmg-faq{
  display:grid;
  gap:12px;
}

.pmg-faqItem{
  border:1px solid var(--pmg-border);
  border-radius:var(--pmg-radius);
  overflow:hidden;
  background:var(--pmg-surface);
  transition:all .15s ease;
}

.pmg-faqItem:hover{
  border-color:var(--pmg-border-hover);
  box-shadow:var(--pmg-shadow-sm);
}

.pmg-faqItem[data-open="1"]{
  border-color:var(--pmg-accent);
  box-shadow:0 0 0 3px var(--pmg-accent-light);
}

.pmg-faqBtn{
  width:100%;
  text-align:left;
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  padding:18px 20px;
  background:var(--pmg-surface);
  border:none;
  cursor:pointer;
  font-weight:600;
  font-size:15px;
  color:var(--pmg-text);
  transition:background .15s ease;
}

.pmg-faqBtn:hover{
  background:var(--pmg-surface2);
}

.pmg-faqBtn:focus{
  outline:none;
  background:var(--pmg-surface2);
}

.pmg-faqIcon{
  width:28px;
  height:28px;
  border-radius:50%;
  border:1.5px solid var(--pmg-border);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:16px;
  color:var(--pmg-text-muted);
  flex-shrink:0;
  transition:all .15s ease;
  background:var(--pmg-surface);
}

.pmg-faqItem[data-open="1"] .pmg-faqIcon{
  background:var(--pmg-accent);
  border-color:var(--pmg-accent);
  color:#ffffff;
  transform:rotate(45deg);
}

.pmg-faqPanel{
  padding:0 20px 20px;
  color:var(--pmg-text-muted);
  font-size:15px;
  line-height:1.7;
  display:none;
}

.pmg-faqItem[data-open="1"] .pmg-faqPanel{
  display:block;
}

.pmg-help__empty{
  text-align:center;
  padding:40px 20px;
  color:var(--pmg-text-muted);
  font-size:15px;
}

/* ---------- Grid Blocks ---------- */
.pmg-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:24px;
}

.pmg-card{
  border:1px solid var(--pmg-border);
  border-radius:var(--pmg-radius-lg);
  background:var(--pmg-surface);
  padding:28px 24px;
  box-shadow:var(--pmg-shadow-sm);
  transition:all .2s ease;
}

.pmg-card:hover{
  border-color:var(--pmg-border-hover);
  box-shadow:var(--pmg-shadow);
  transform:translateY(-2px);
}

.pmg-card h3{
  margin:0 0 16px;
  font-size:16px;
  font-weight:600;
  color:var(--pmg-text);
  letter-spacing:-.01em;
}

.pmg-card ul{
  margin:0;
  padding-left:20px;
  color:var(--pmg-text-muted);
  font-size:14px;
  line-height:1.8;
  list-style-position:outside;
}

.pmg-card ul li{
  margin-bottom:8px;
}

.pmg-card ul li:last-child{
  margin-bottom:0;
}

.pmg-card a{
  color:var(--pmg-accent);
  font-weight:500;
}

.pmg-card a:hover{
  color:var(--pmg-accent-hover);
}

.pmg-card strong{
  color:var(--pmg-text);
  font-weight:600;
}

/* ---------- Locations ---------- */
.pmg-locations{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:24px;
}

.pmg-loc{
  border:1px solid var(--pmg-border);
  border-radius:var(--pmg-radius-lg);
  background:var(--pmg-surface);
  padding:28px 24px;
  box-shadow:var(--pmg-shadow-sm);
  transition:all .2s ease;
}

.pmg-loc:hover{
  border-color:var(--pmg-border-hover);
  box-shadow:var(--pmg-shadow);
  transform:translateY(-2px);
}

.pmg-loc h3{
  margin:0 0 12px;
  font-size:16px;
  font-weight:600;
  color:var(--pmg-text);
  letter-spacing:-.01em;
}

.pmg-loc p{
  margin:0 0 10px;
  color:var(--pmg-text-muted);
  font-size:14px;
  line-height:1.7;
}

.pmg-loc p:last-child{
  margin-bottom:0;
}

.pmg-loc strong{
  color:var(--pmg-text);
  font-weight:600;
}

/* ---------- Support Cards ---------- */
.pmg-support{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:24px;
}

.pmg-supportCard{
  border:1px solid var(--pmg-border);
  border-radius:var(--pmg-radius-lg);
  background:var(--pmg-surface);
  padding:32px 28px;
  box-shadow:var(--pmg-shadow-sm);
  transition:all .2s ease;
}

.pmg-supportCard:hover{
  border-color:var(--pmg-border-hover);
  box-shadow:var(--pmg-shadow);
  transform:translateY(-2px);
}

.pmg-supportCard h3{
  margin:0 0 12px;
  font-size:18px;
  font-weight:600;
  color:var(--pmg-text);
  letter-spacing:-.01em;
}

.pmg-supportCard p{
  margin:0 0 24px;
  color:var(--pmg-text-muted);
  font-size:14px;
  line-height:1.7;
}

.pmg-supportRow{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

/* ---------- Modal ---------- */
.pmg-modal[hidden]{display:none !important;}

.pmg-modal{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.pmg-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(4px);
}

.pmg-modal__dialog{
  position:relative;
  width:100%;
  max-width:520px;
  border:1px solid var(--pmg-border);
  border-radius:var(--pmg-radius-lg);
  background:var(--pmg-surface);
  box-shadow:var(--pmg-shadow-lg);
  overflow:hidden;
  z-index:1;
}

.pmg-modal__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 24px;
  border-bottom:1px solid var(--pmg-border);
  background:var(--pmg-surface2);
}

.pmg-modal__title{
  margin:0;
  font-size:18px;
  font-weight:600;
  color:var(--pmg-text);
}

.pmg-modal__close{
  appearance:none;
  border:1px solid var(--pmg-border);
  background:var(--pmg-surface);
  color:var(--pmg-text);
  width:36px;
  height:36px;
  border-radius:var(--pmg-radius);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  line-height:1;
  transition:all .15s ease;
}

.pmg-modal__close:hover{
  background:var(--pmg-surface3);
  border-color:var(--pmg-border-hover);
}

.pmg-modal__body{
  padding:24px;
}

.pmg-modal__text{
  margin:0 0 24px;
  color:var(--pmg-text-muted);
  font-size:15px;
  line-height:1.7;
}

.pmg-modal__actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px){
  .pmg-help__container{
    padding:0 20px;
  }

  .pmg-help__hero{
    grid-template-columns:1fr;
    gap:24px;
  }

  .pmg-grid,
  .pmg-locations{
    grid-template-columns:repeat(2,1fr);
  }

  .pmg-support{
    grid-template-columns:1fr;
  }
}

@media (max-width: 768px){
  .pmg-help{
    padding:32px 0 48px;
  }

  .pmg-help__container{
    width:100%;
    padding:0 16px;
  }

  .pmg-hero{
    padding:28px 24px;
  }

  .pmg-hero__title{
    font-size:32px;
  }

  .pmg-hero__subtitle{
    font-size:15px;
  }

  .pmg-cta{
    flex-direction:column;
    align-items:stretch;
  }

  .pmg-btn{
    width:100%;
    justify-content:center;
  }

  .pmg-side{
    padding:24px 20px;
  }

  .pmg-section{
    padding:28px 24px;
  }

  .pmg-section__title{
    font-size:20px;
  }

  .pmg-grid,
  .pmg-locations{
    grid-template-columns:1fr;
  }

  .pmg-card,
  .pmg-loc,
  .pmg-supportCard{
    padding:24px 20px;
  }
}

@media (max-width: 480px){
  .pmg-hero__title{
    font-size:28px;
  }

  .pmg-btn{
    padding:10px 18px;
    font-size:13px;
  }
}