/*
 * PM Nexus Tailoring - Skin v2.4.6
 * Design-system bridge with Apply Hub / Risk Radar
 */

/* ─── CSS VARS BRIDGE (Apply Hub vars inside Tailoring page) ── */
.pmnx-tailoring-page,
.pmnx-tailoring-page * {
  --blue:       #185FA5; --blue-md:  #378ADD; --blue-bg:  #E6F1FB; --blue-bdr: #B5D4F4;
  --teal:       #0F6E56; --teal-md:  #1D9E75; --teal-bg:  #E1F5EE; --teal-bdr: #9FE1CB;
  --amber:      #854F0B; --amber-md: #BA7517; --amber-bg: #FAEEDA; --amber-bdr:#FAC775;
  --red:        #991B1B; --red-bg:   #FEE2E2; --red-bdr:  #FCA5A5;
  --slate:      #334155; --slate-bg: #F1F5F9; --slate-bdr:#CBD5E1;
  --text:       #0F172A; --text-md:  #475569; --text-lt:  #64748B; --text-muted:#94A3B8;
  --bg:         #ffffff; --bg-soft:  #F8FAFC; --bg-mid:   #F1F5F9;
  --border:     #E2E8F0; --border-md:#CBD5E1;
  --r:8px; --rl:12px; --rxl:18px;
  --card-radius: 18px; --section-radius: 22px;
  --shadow-card: 0 1px 3px rgba(15,23,42,.06), 0 4px 12px rgba(15,23,42,.04);
  --shadow-hover: 0 8px 28px rgba(15,23,42,.09);
  --motion: 160ms; --motion-slow: 280ms;
}

/* ─── HERO GRID ─────────────────────────────────────────────── */
.pmnx-t-hero-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 48px;
  align-items: start;
  padding: 36px 0 32px;
}
.pmnx-t-hero-h1 {
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1.05;
  color: #0F172A;
  margin: 0 0 16px;
  max-width: 10ch;
}
.pmnx-t-hero-lead {
  font-size: 15px;
  color: #475569;
  line-height: 1.7;
  max-width: 480px;
  margin: 0 0 24px;
}
.pmnx-t-hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* ─── HERO CARD (amber - identical to Risk Radar) ─────────── */
.pmnx-t-hero-card {
  background: #FAEEDA;
  border: 1px solid #FAC775;
  border-radius: 14px;
  padding: 22px 20px 20px;
  position: relative;
  overflow: hidden;
}
.pmnx-t-hero-card::before {
  content: '';
  position: absolute;
  top: -24px; right: -24px;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(186,117,23,.08) 0%, transparent 70%);
  pointer-events: none;
}
.pmnx-t-hc-icon-wrap {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(255,255,255,.65);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}
.pmnx-t-hc-eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: #854F0B; margin-bottom: 6px;
}
.pmnx-t-hc-title {
  font-size: 16px; font-weight: 800; color: #0F172A;
  letter-spacing: -.02em; margin: 0 0 14px;
}
.pmnx-t-hc-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 0; border-top: 1px solid #FAC775; font-size: 13px; color: #64748B;
}
.pmnx-t-hc-val { font-weight: 700; }
.pmnx-t-hc-val--done  { color: #0F6E56; }
.pmnx-t-hc-val--muted { color: #94A3B8; font-weight: 500; }
.pmnx-t-hc-desc { font-size: 13px; line-height: 1.55; margin: 0; }

/* ─── HOW IT WORKS ──────────────────────────────────────────── */
.pmnx-t-panel {
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 18px;
  overflow: visible;
  margin-bottom: 16px;
}
.pmnx-t-panel-head {
  padding: 20px 24px 16px;
  border-bottom: 1px solid #F1F5F9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.pmnx-t-panel-label {
  font-size: 10px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: #BA7517; white-space: nowrap;
}
.pmnx-t-panel-title {
  font-size: clamp(16px, 2vw, 21px);
  font-weight: 800; letter-spacing: -.03em; color: #0F172A; margin: 0;
}
.pmnx-t-panel-inner { padding: 20px 24px; }
.pmnx-t-panel-desc {
  font-size: 13px; color: #475569; line-height: 1.65; margin: 0 0 18px;
}
.pmnx-t-how-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.pmnx-t-how-step {
  background: #F8FAFC; border: 1px solid #E2E8F0;
  border-radius: 12px; padding: 18px;
}
.pmnx-t-how-num {
  width: 28px; height: 28px; border-radius: 8px;
  background: #FAEEDA; color: #BA7517;
  font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; margin-bottom: 10px;
}
.pmnx-t-how-title { font-size: 14px; font-weight: 700; color: #0F172A; margin-bottom: 6px; }
.pmnx-t-how-body { font-size: 13px; color: #475569; line-height: 1.55; }

/* ─── WORKSPACE SECTION ─────────────────────────────────────── */
.pmnx-t-workspace {
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 18px;
  padding: 24px;
  margin-bottom: 16px;
  overflow: visible;
  position: relative;
}
.pmnx-t-workspace::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #BA7517, #854F0B 50%, #FAC775);
  border-radius: 18px 18px 0 0;
}

/* Make Apply Hub classes work inside Tailoring workspace */
.pmnx-t-workspace .pmnx-ah-workspace-header {
  display: flex; align-items: center;
  justify-content: space-between; gap: 16px; margin-bottom: 22px;
}
.pmnx-t-workspace .pmnx-ah-layer-kicker {
  font-size: 10px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: #BA7517;
}
.pmnx-t-workspace .pmnx-ah-workspace-actions {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0;
}
.pmnx-t-workspace .pmnx-ah-create-panel { display: none; }
.pmnx-t-workspace .pmnx-ah-create-panel.is-open { display: block; }

/* Evolution + Reports panels */
.pmnx-t-evol-bar { margin-bottom: 16px; }

/* ─── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .pmnx-t-hero-grid { grid-template-columns: 1fr; gap: 24px; padding: 24px 0; }
  .pmnx-t-hero-card { order: -1; }
  .pmnx-t-hero-h1 { font-size: 28px; max-width: none; }
  .pmnx-t-how-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .pmnx-t-panel-head { flex-direction: column; gap: 8px; }
}

/* ─── HIDE OLD HERO ELEMENTS ─────────────────────────────────── */
.pmnx-tailoring-hero .eyebrow,
.pmnx-tailoring-hero .hero-tags,
.pmnx-tailoring-hero .hero-side {
  display: none !important;
}
.pmnx-tailoring-hero.wow-gradient {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ─── SECTION CARDS POLISH ───────────────────────────────────── */
.pmnx-tailoring-page .card {
  border-radius: 18px !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.06), 0 4px 12px rgba(15,23,42,.04) !important;
}
.pmnx-tailoring-page .eyebrow,
.pmnx-tailoring-page .panel-label {
  color: #BA7517 !important;
}

/* ─── FIX 1: Override tailoring.css hero grid (display:grid breaks pmnx-t-hero-grid) ── */
section.pmnx-tailoring-hero {
  display: block !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
.pmnx-t-hero-grid {
  display: grid !important;
  grid-template-columns: 1fr 340px !important;
  gap: 48px !important;
  align-items: start !important;
  padding: 36px 0 28px !important;
  width: 100% !important;
}

/* ─── FIX 2: How it works — label + title stack vertically, left-aligned ── */
.pmnx-t-panel-head {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
  padding: 22px 24px 18px !important;
}
.pmnx-t-panel-title {
  text-align: left !important;
}

/* ─── Mobile: stack hero ──────────────────────────────────────────────── */
@media (max-width: 860px) {
  .pmnx-t-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 20px 0 16px !important;
  }
  .pmnx-t-hero-card { order: -1; }
}


/* v2.3.11 logged-out CTA: match Risk Radar primary amber button */
.pmnx-tailoring-page .hero-guest .pmnx-t-hero-actions .pmnx-btn.primary,
.pmnx-tailoring-page .hero-guest .pmnx-t-hero-actions .pmnx-btn.primary:link,
.pmnx-tailoring-page .hero-guest .pmnx-t-hero-actions .pmnx-btn.primary:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: auto;
  padding: 12px 24px;
  border-radius: var(--r, 8px);
  border: 1px solid #BA7517 !important;
  background: #BA7517 !important;
  color: #fff !important;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 1px 4px rgba(133,79,11,.25), 0 4px 12px rgba(186,117,23,.2) !important;
  transition: transform var(--motion,160ms) ease, background var(--motion,160ms) ease, box-shadow var(--motion,160ms) ease, border-color var(--motion,160ms) ease;
}
.pmnx-tailoring-page .hero-guest .pmnx-t-hero-actions .pmnx-btn.primary:hover,
.pmnx-tailoring-page .hero-guest .pmnx-t-hero-actions .pmnx-btn.primary:focus,
.pmnx-tailoring-page .hero-guest .pmnx-t-hero-actions .pmnx-btn.primary:active {
  background: #854F0B !important;
  border-color: #854F0B !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(133,79,11,.3), 0 6px 20px rgba(186,117,23,.25) !important;
}

/* v2.3.11 keep imported v2.5.5 card styling authoritative for the new hero and How it works cards */
.pmnx-tailoring-page .pmnx-t-hero-card,
.pmnx-tailoring-page .pmnx-t-panel,
.pmnx-tailoring-page .pmnx-t-how-step {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.pmnx-tailoring-page .pmnx-t-panel {
  background: #fff !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 18px !important;
  box-shadow: none !important;
}
.pmnx-tailoring-page .pmnx-t-how-step {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
  padding: 18px !important;
  box-shadow: none !important;
}
.pmnx-tailoring-page .pmnx-t-how-num {
  background: #FAEEDA !important;
  color: #BA7517 !important;
}

/* v2.9.1 hero line control */
.pmnx-tailoring-page .pmnx-t-hero-h1{max-width:22ch!important;font-size:clamp(32px,4vw,48px)!important;line-height:1.08!important;}
@media(max-width:720px){.pmnx-tailoring-page .pmnx-t-hero-h1{max-width:16ch!important;font-size:34px!important;}}


/* v3.0.0 Apply integration banner */
.pmnx-apply-next-step-banner{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:18px 0;padding:18px 20px;border:1px solid rgba(186,117,23,.28);border-radius:16px;background:linear-gradient(135deg,#fff,var(--pmnx-apply-amber-bg,#FAEEDA));box-shadow:0 8px 24px rgba(133,79,11,.08)}
.pmnx-apply-next-step-banner.hidden{display:none!important}
.pmnx-apply-next-step-copy{min-width:0}
.pmnx-apply-next-step-kicker{display:block;margin-bottom:4px;color:var(--pmnx-apply-amber-md,#BA7517);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.pmnx-apply-next-step-banner h3{margin:0 0 5px;color:#0f172a;font-size:18px;line-height:1.18;font-weight:850;letter-spacing:-.03em}
.pmnx-apply-next-step-banner p{margin:0;color:var(--pmnx-apply-text-md,#475569);font-size:13px;line-height:1.55}
@media(max-width:720px){.pmnx-apply-next-step-banner{align-items:flex-start;flex-direction:column}.pmnx-apply-next-step-banner .pmnx-risk-btn,.pmnx-apply-next-step-banner .pmnx-apply-btn{width:100%}}


/* PM Nexus Apply typography parity v3.0.6
   Keep Tailoring hero title as the reference style and use Risk Radar's clear How-it-works typography. */
.pmnx-tailoring-page .pmnx-t-hero-h1{
  font-size: clamp(28px, 3.5vw, 42px) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  letter-spacing: -.04em !important;
  color: var(--pmnx-apply-ink) !important;
  max-width: 14ch !important;
}
.pmnx-tailoring-page .pmnx-t-hero-lead{
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: var(--pmnx-apply-text-md) !important;
  max-width: 620px !important;
}
.pmnx-tailoring-page .pmnx-t-hc-eyebrow,
.pmnx-tailoring-page .pmnx-t-hc-row,
.pmnx-tailoring-page .pmnx-t-hc-desc{
  font-size: 13px !important;
  line-height: 1.5 !important;
}
.pmnx-tailoring-page .pmnx-t-hc-eyebrow{
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
}
.pmnx-tailoring-page .pmnx-t-hc-title{
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: -.02em !important;
}
.pmnx-tailoring-page .pmnx-t-panel-label{
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  color: var(--pmnx-apply-amber) !important;
}
.pmnx-tailoring-page .pmnx-t-panel-title{
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: -.03em !important;
  color: var(--pmnx-apply-ink) !important;
}
.pmnx-tailoring-page .pmnx-t-how-num{
  width: 28px !important;
  height: 28px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  border-radius: var(--pmnx-apply-radius) !important;
}
.pmnx-tailoring-page .pmnx-t-how-title{
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: var(--pmnx-apply-ink) !important;
}
.pmnx-tailoring-page .pmnx-t-how-body{
  font-size: 13px !important;
  line-height: 1.65 !important;
  color: var(--pmnx-apply-text-md) !important;
}


/* PM Nexus Apply final font parity enforcement — scoped to landing components only */
.pmnx-tailoring-page .pmnx-t-hero-h1,
.pmnx-tailoring-page .pmnx-apply-hero-title,
.pmnx-risk .pmnx-apply-hero-title,
.pmnx-risk .pmnx-risk-hero-copy h1,
.pmnx-replay .pmnx-apply-hero-title,
.pmnx-replay .pmnx-replay-hero-title{
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  font-size:var(--pmnx-apply-hero-title-size)!important;
  font-weight:var(--pmnx-apply-hero-title-weight)!important;
  line-height:var(--pmnx-apply-hero-title-lh)!important;
  letter-spacing:var(--pmnx-apply-hero-title-ls)!important;
  color:var(--pmnx-apply-ink)!important;
  max-width:var(--pmnx-apply-hero-title-max)!important;
  margin:0 0 14px!important;
}
.pmnx-tailoring-page .pmnx-t-hero-lead,
.pmnx-tailoring-page .pmnx-apply-hero-lead,
.pmnx-risk .pmnx-risk-hero-copy p,
.pmnx-risk .pmnx-apply-hero-lead,
.pmnx-replay .pmnx-replay-hero-sub,
.pmnx-replay .pmnx-apply-hero-lead{
  font-size:var(--pmnx-apply-lead-size)!important;
  line-height:var(--pmnx-apply-lead-lh)!important;
  max-width:var(--pmnx-apply-lead-max)!important;
  color:var(--pmnx-apply-text-md)!important;
  margin:0 0 22px!important;
}
.pmnx-tailoring-page .pmnx-t-panel-title,
.pmnx-tailoring-page .pmnx-risk-panel-head h2,
.pmnx-risk .pmnx-risk-panel-head h2,
.pmnx-replay .pmnx-risk-panel-head h2,
.pmnx-replay .pmnx-apply-panel-title{
  font-size:var(--pmnx-apply-how-title-size)!important;
  font-weight:800!important;
  line-height:1.25!important;
  letter-spacing:-.03em!important;
  color:var(--pmnx-apply-ink)!important;
  margin:0 0 14px!important;
}
.pmnx-risk a.pmnx-apply-btn--primary,
.pmnx-risk a.pmnx-apply-btn--primary:visited,
.pmnx-replay a.pmnx-apply-btn--primary,
.pmnx-replay a.pmnx-apply-btn--primary:visited{color:var(--pmnx-apply-bg)!important;}

/* v3.0.10 — keep PM Nexus Core header typography consistent on Tailoring pages */
body header,
body header a,
body header button,
body .pmnx-site-header,
body .pmnx-site-header *,
body .pmnx-shell-header,
body .pmnx-shell-header *,
body .pmnx-header,
body .pmnx-header *{
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
body header [class*="welcome"],
body header [class*="Welcome"],
body header [class*="user"],
body header [class*="User"]{
  font-size:15px;
  font-weight:800;
  letter-spacing:-.01em;
}


/* v3.0.11 — PM Nexus Core header typography parity on Tailoring pages */
body{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;}
body header,
body header *,
body .pmnx-site-header,
body .pmnx-site-header *,
body .pmnx-shell-header,
body .pmnx-shell-header *,
body .pmnx-header,
body .pmnx-header *{
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
}
body header span,
body header [class*="welcome" i],
body header [class*="user" i],
body header [class*="account" i],
body header [class*="profile" i],
body .pmnx-site-header [class*="welcome" i],
body .pmnx-site-header [class*="user" i],
body .pmnx-site-header [class*="account" i],
body .pmnx-shell-header [class*="welcome" i],
body .pmnx-shell-header [class*="user" i],
body .pmnx-shell-header [class*="account" i]{
  font-size:15px!important;
  font-weight:800!important;
  letter-spacing:-.01em!important;
  line-height:1.2!important;
}