/* QProctor editorial blog components. Scoped to the CMS body fragment. */
#qp-blog {
  --qp-navy: #172335;
  --qp-navy-2: #22334a;
  --qp-orange: #e47b36;
  --qp-orange-2: #f59e0b;
  --qp-ink: #1f2937;
  --qp-muted: #64748b;
  --qp-line: #e5e7eb;
  --qp-soft: #f8fafc;
  color: var(--qp-ink);
  font-family: inherit;
  line-height: 1.7;
  width: 100%;
  overflow: hidden;
}
#qp-blog *, #qp-blog *::before, #qp-blog *::after { box-sizing: border-box; }
#qp-blog > p, #qp-blog > h2, #qp-blog > h3,
#qp-blog > .qp-angle-grid, #qp-blog > .qp-highlight-dark,
#qp-blog > .qp-vs, #qp-blog > .qp-scorecard-box,
#qp-blog > .qp-interactive-checklist, #qp-blog > .qp-eye-section,
#qp-blog > .qp-faq, #qp-blog > .qp-author-box,
#qp-blog > .qp-related-links, #qp-blog > .qp-cta-2026,
#qp-blog > .qp-related-2026 { max-width: 1080px; margin-left: auto; margin-right: auto; }
#qp-blog > p { margin-top: 1.15rem; margin-bottom: 1.15rem; }
#qp-blog > h2 { margin-top: 3.25rem; margin-bottom: 1rem; color: var(--qp-navy); font-size: clamp(1.55rem, 2.5vw, 2.25rem); line-height: 1.2; font-weight: 800; }
#qp-blog > h3 { margin-top: 2.5rem; color: var(--qp-navy); font-size: 1.45rem; }
#qp-blog a { color: var(--qp-orange); text-decoration: underline; text-underline-offset: 3px; }
#qp-blog .qp-hero-banner { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); align-items: center; gap: 2rem; min-height: 330px; margin: 0 0 2.5rem; padding: clamp(2rem, 5vw, 4.5rem); border-radius: 28px; overflow: hidden; color: #fff; background: radial-gradient(circle at 84% 20%, rgba(228,123,54,.38), transparent 26%), linear-gradient(135deg, #142235 0%, #223b57 58%, #263447 100%); box-shadow: 0 22px 55px rgba(23,35,53,.22); }
#qp-blog .qp-hero-banner::after { content: ''; position: absolute; inset: auto -8% -55% 35%; height: 280px; border-radius: 50%; background: rgba(228,123,54,.18); filter: blur(5px); }
#qp-blog .qp-hero-content, #qp-blog .qp-hero-visual { position: relative; z-index: 1; }
#qp-blog .qp-hero-content h1 { margin: 1rem 0 .85rem; color: #fff; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.08; letter-spacing: -.03em; }
#qp-blog .qp-hero-content p { max-width: 650px; margin: 0; color: rgba(255,255,255,.82); font-size: 1.08rem; }
#qp-blog .qp-badge { display: inline-flex; align-items: center; gap: .55rem; padding: .45rem .8rem; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; background: rgba(255,255,255,.1); color: #ffd4ad; font-size: .82rem; font-weight: 700; }
#qp-blog .qp-hero-visual { min-height: 230px; display: grid; place-items: center; }
#qp-blog .qp-glow-circle { display: grid; place-items: center; width: 190px; height: 190px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; color: #ffc08c; background: radial-gradient(circle, rgba(228,123,54,.34), rgba(255,255,255,.04) 58%, transparent 60%); box-shadow: 0 0 70px rgba(228,123,54,.25); }
#qp-blog .qp-glow-svg { width: 92px; height: 92px; }
#qp-blog .qp-float-icon { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.2); border-radius: 14px; background: rgba(255,255,255,.12); box-shadow: 0 10px 24px rgba(0,0,0,.15); font-size: 1.25rem; }
#qp-blog .qp-icon-1 { top: 2%; left: 8%; } #qp-blog .qp-icon-2 { top: 14%; right: 2%; } #qp-blog .qp-icon-3 { bottom: 8%; left: 4%; } #qp-blog .qp-icon-4 { bottom: 0; right: 10%; }
#qp-blog .qp-angle-grid, #qp-blog .qp-eye-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; margin-top: 1.5rem; }
#qp-blog .qp-angle-card, #qp-blog .qp-eye-card { padding: 1.35rem; border: 1px solid var(--qp-line); border-radius: 18px; background: #fff; box-shadow: 0 12px 28px rgba(23,35,53,.08); }
#qp-blog .qp-angle-card h4, #qp-blog .qp-eye-card h4 { margin: 0 0 .55rem; color: var(--qp-navy); font-size: 1.08rem; }
#qp-blog .qp-angle-card p, #qp-blog .qp-eye-card p { margin: 0; color: #526174; font-size: .94rem; }
#qp-blog .qp-angle-card i, #qp-blog .qp-eye-card i, #qp-blog .qp-highlight-dark i { margin-right: .45rem; color: var(--qp-orange); }
#qp-blog .qp-highlight-dark { margin-top: 1.8rem; padding: 1.6rem 1.8rem; border-radius: 18px; background: linear-gradient(135deg, #172335, #2c3e56); color: #e7edf5; box-shadow: 0 18px 35px rgba(23,35,53,.18); }
#qp-blog .qp-highlight-dark strong { display: block; margin-bottom: .55rem; color: #ffd0aa; font-size: 1.15rem; }
#qp-blog .qp-highlight-dark p { margin: 0; }
#qp-blog .qp-vs { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; margin-top: 1.5rem; }
#qp-blog .qp-vs-card { padding: 1.6rem; border: 1px solid var(--qp-line); border-radius: 20px; background: #fff; box-shadow: 0 12px 30px rgba(23,35,53,.07); }
#qp-blog .qp-vs-card.dark { border-color: #273b56; color: #e8eef6; background: linear-gradient(145deg, #172335, #2c405b); }
#qp-blog .qp-vs-card h4 { margin: 1rem 0 .4rem; font-size: 1.3rem; color: var(--qp-navy); } #qp-blog .qp-vs-card.dark h4 { color: #fff; }
#qp-blog .qp-vs-card p { margin: 0; color: #596779; } #qp-blog .qp-vs-card.dark p { color: #d5dfeb; }
#qp-blog .qp-vs-badge { display: inline-block; padding: .3rem .7rem; border-radius: 999px; font-size: .75rem; font-weight: 800; } #qp-blog .badge-light { color: #9a4b1d; background: #fff0e5; } #qp-blog .badge-primary { color: #fff; background: var(--qp-orange); }
#qp-blog .qp-scorecard-box { margin-top: 2rem; padding: clamp(1.2rem, 3vw, 2rem); border-radius: 22px; background: #f3f6fa; border: 1px solid #dce4ee; }
#qp-blog .qp-scorecard-header { margin: -2rem -2rem 1.2rem; padding: 1.4rem 2rem; border-radius: 22px 22px 0 0; color: #fff; background: linear-gradient(135deg, #172335, #334b67); }
#qp-blog .qp-scorecard-header h3 { margin: 0 0 .25rem; color: #fff; font-size: 1.35rem; } #qp-blog .qp-scorecard-header span { color: #cbd8e7; font-size: .9rem; }
#qp-blog .qp-score-row { display: grid; grid-template-columns: 1.3fr 1fr 1.4fr; align-items: center; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid #dce4ee; }
#qp-blog .qp-score-label { font-weight: 750; color: var(--qp-navy); } #qp-blog .qp-score-weight { color: var(--qp-muted); font-size: .9rem; }
#qp-blog .qp-score-input { width: 100%; padding: .7rem .8rem; border: 1px solid #cbd5e1; border-radius: 10px; color: var(--qp-navy); background: #fff; }
#qp-blog .qp-result-box { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: center; margin-top: 1.4rem; padding: 1.2rem 1.4rem; border-radius: 16px; background: #fff; border-left: 5px solid var(--qp-orange); }
#qp-blog .qp-result-box h4 { margin: 0 0 .35rem; color: var(--qp-navy); } #qp-blog .qp-result-box p { margin: 0; color: var(--qp-muted); }
#qp-blog .qp-calc-score { display: block; color: var(--qp-orange); font-size: 2.5rem; font-weight: 850; line-height: 1; } #qp-blog .qp-calc-label { color: var(--qp-muted); font-size: .78rem; }
#qp-blog .qp-calc-advice { display: inline-block; margin-top: .65rem; padding: .25rem .6rem; border-radius: 999px; color: #9a4b1d; background: #fff0e5; font-size: .72rem; font-weight: 800; }
#qp-blog .qp-interactive-checklist { margin-top: 1.5rem; padding: 1.5rem; border: 1px solid var(--qp-line); border-radius: 20px; background: var(--qp-soft); }
#qp-blog .qp-checklist-header h3 { margin: 0; color: var(--qp-navy); } #qp-blog .qp-check-item { display: flex; align-items: flex-start; gap: .85rem; padding: 1rem 0; border-bottom: 1px solid var(--qp-line); cursor: pointer; }
#qp-blog .qp-check-input { position: absolute; opacity: 0; pointer-events: none; } #qp-blog .qp-check-box { display: grid; place-items: center; flex: 0 0 26px; width: 26px; height: 26px; border: 2px solid #cbd5e1; border-radius: 7px; color: transparent; background: #fff; }
#qp-blog .qp-check-input:checked + .qp-check-box { border-color: var(--qp-orange); color: #fff; background: var(--qp-orange); } #qp-blog .qp-check-text { color: #526174; } #qp-blog .qp-check-text strong { color: var(--qp-navy); }
#qp-blog .qp-eye-section { margin-top: 2rem; padding: clamp(1.4rem, 4vw, 2.5rem); border-radius: 24px; color: #e9f0f8; background: linear-gradient(135deg, #172335, #273f5d); }
#qp-blog .qp-eye-section h2 { margin-top: 0; color: #fff; } #qp-blog .qp-eye-section > p { color: #cad7e5; } #qp-blog .qp-eye-card { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.15); } #qp-blog .qp-eye-card h4 { color: #fff; } #qp-blog .qp-eye-card p { color: #c9d5e2; }
#qp-blog .qp-contact-box { margin-top: 1.5rem; padding: 1.5rem; border: 1px solid rgba(228,123,54,.38); border-radius: 18px; text-align: center; background: rgba(228,123,54,.13); }
#qp-blog .qp-contact-box h3 { margin: 0 0 .4rem; color: #fff; } #qp-blog .qp-contact-box p { color: #e0e9f2; } #qp-blog .qp-cta-btn, #qp-blog .qp-cta-actions a { display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1.15rem; border-radius: 10px; color: #fff; background: var(--qp-orange); text-decoration: none; font-weight: 750; }
#qp-blog .qp-contact-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 1rem; } #qp-blog .qp-contact-links a { color: #ffd1af; }
#qp-blog .qp-faq { margin-top: .8rem; padding: 1rem 1.15rem; border: 1px solid var(--qp-line); border-radius: 12px; background: #fff; } #qp-blog .qp-faq summary { cursor: pointer; color: var(--qp-navy); font-weight: 750; list-style: none; } #qp-blog .qp-faq summary::-webkit-details-marker { display:none; } #qp-blog .qp-faq summary .icon { float: right; color: var(--qp-orange); } #qp-blog .qp-faq-ans { padding: .9rem 0 .15rem; color: #596779; }
#qp-blog .qp-author-box { display: flex; gap: 1rem; align-items: flex-start; margin-top: 2rem; padding: 1.4rem; border: 1px solid #dbe5ef; border-radius: 18px; background: #f7fafc; } #qp-blog .qp-author-avatar { display:grid; place-items:center; flex:0 0 52px; width:52px; height:52px; border-radius:50%; color:#fff; background:var(--qp-orange); } #qp-blog .qp-author-info h4 { margin: 0 0 .3rem; color: var(--qp-navy); } #qp-blog .qp-author-info p { margin: 0; color: var(--qp-muted); font-size: .92rem; }
#qp-blog .qp-related-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .85rem; margin-top: 1rem; } #qp-blog .qp-link-card { display:flex; align-items:flex-start; gap:.8rem; padding:1rem; border:1px solid var(--qp-line); border-radius:14px; color:var(--qp-navy); text-decoration:none; background:#fff; } #qp-blog .qp-link-icon { display:grid; place-items:center; flex:0 0 38px; width:38px; height:38px; border-radius:10px; color:#fff; background:var(--qp-orange); } #qp-blog .qp-link-text { font-weight:750; } #qp-blog .qp-link-text span { display:block; margin-top:.2rem; color:var(--qp-muted); font-size:.82rem; font-weight:400; }
#qp-blog .qp-cta-2026 { margin-top: 2rem; padding: 2rem; border-radius: 22px; color:#fff; background:linear-gradient(135deg,#172335,#2d4663); text-align:center; } #qp-blog .qp-cta-2026 h2 { margin:0 0 .4rem; color:#fff; } #qp-blog .qp-cta-2026 p { color:#d4deea; } #qp-blog .qp-cta-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:.75rem; } #qp-blog .qp-cta-actions .qp-secondary { color:#ffd2b2; background:transparent; border:1px solid rgba(255,255,255,.3); }
#qp-blog .qp-related-2026 { margin-top: 2rem; padding: 1.5rem; border-top: 1px solid var(--qp-line); } #qp-blog .qp-related-2026 h2 { margin-top:0; } #qp-blog .qp-related-2026 li { margin:.35rem 0; }
@media (max-width: 760px) { #qp-blog .qp-hero-banner { grid-template-columns: 1fr; padding: 1.6rem; } #qp-blog .qp-hero-visual { min-height: 180px; } #qp-blog .qp-angle-grid, #qp-blog .qp-eye-grid, #qp-blog .qp-related-links, #qp-blog .qp-vs { grid-template-columns: 1fr; } #qp-blog .qp-score-row { grid-template-columns: 1fr; gap: .45rem; } #qp-blog .qp-scorecard-header { margin: -1.2rem -1.2rem 1rem; padding: 1.1rem 1.2rem; } #qp-blog .qp-result-box { grid-template-columns: 1fr; } #qp-blog .qp-contact-links { flex-direction: column; align-items: center; } }

/* QProctor legacy editorial templates — scoped to #qp-blog */
#qp-blog .container,
#qp-blog .wide-container { width: min(calc(100% - 2rem), 1120px); margin-inline: auto; }
#qp-blog .hero { position: relative; isolation: isolate; min-height: 340px; margin: 0 auto 2.5rem; padding: clamp(2rem, 5vw, 4.25rem); overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 26px; color: #f8fafc; background: radial-gradient(circle at 84% 18%, rgba(228,123,54,.28), transparent 28%), linear-gradient(135deg, #172335, #263d59 62%, #1b2b40); box-shadow: 0 22px 55px rgba(23,35,53,.18); }
#qp-blog .hero::before { content: ''; position: absolute; z-index: 0; width: 340px; height: 340px; right: -110px; bottom: -220px; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; box-shadow: 0 0 0 28px rgba(255,255,255,.025), 0 0 0 58px rgba(255,255,255,.02); pointer-events: none; }
#qp-blog .hero-inner { position: relative; z-index: 2; width: min(100%, 1080px); margin: 0 auto; }
#qp-blog .hero-content { position: relative; z-index: 2; max-width: 760px; }
#qp-blog .hero-content h1 { max-width: 19ch; margin: 1rem 0 .9rem; color: #fff; font-size: clamp(2rem, 4.3vw, 3.35rem); font-weight: 800; line-height: 1.08; letter-spacing: -.035em; }
#qp-blog .hero-desc { max-width: 690px; margin: 0; color: rgba(248,250,252,.82); font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.65; }
#qp-blog .hero-stats-row { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .75rem; max-width: 700px; margin-top: 1.7rem; }
#qp-blog .stat-pill { min-width: 0; padding: .9rem 1rem; border: 1px solid rgba(255,255,255,.16); border-radius: 14px; background: rgba(255,255,255,.08); backdrop-filter: blur(8px); }
#qp-blog .stat-pill-number { display: block; color: #ffd0aa; font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 800; line-height: 1.1; }
#qp-blog .stat-pill-label { display: block; margin-top: .3rem; color: rgba(248,250,252,.76); font-size: .82rem; line-height: 1.35; }
#qp-blog .badge-row { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; }
#qp-blog .badge { display: inline-flex; align-items: center; gap: .5rem; padding: .42rem .72rem; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; color: #ffe0c8; background: rgba(255,255,255,.09); font-size: .8rem; font-weight: 700; }
#qp-blog .badge-dot { display: inline-block; width: .48rem; height: .48rem; border-radius: 50%; background: var(--qp-orange); box-shadow: 0 0 0 4px rgba(228,123,54,.16); }
#qp-blog .text-orange { color: var(--qp-orange); }
#qp-blog .geo-shape { position: absolute; z-index: 0; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; pointer-events: none; }
#qp-blog .geo-1 { top: 8%; right: 10%; width: 74px; height: 74px; }
#qp-blog .geo-2 { top: 18%; right: 20%; width: 24px; height: 24px; background: rgba(228,123,54,.35); }
#qp-blog .geo-3 { right: 4%; bottom: 16%; width: 42px; height: 42px; }
#qp-blog .geo-4 { right: 28%; bottom: 10%; width: 14px; height: 14px; background: rgba(255,255,255,.18); }
#qp-blog .cyber-eye-container { position: absolute; z-index: 1; top: 50%; right: clamp(1rem, 7vw, 5rem); width: clamp(190px, 27vw, 320px); aspect-ratio: 1; transform: translateY(-50%); opacity: .62; pointer-events: none; }
#qp-blog .cyber-eye-shape { position: absolute; inset: 24% 12%; border: 2px solid rgba(255,208,170,.7); border-radius: 72% 12%; transform: rotate(45deg); box-shadow: 0 0 34px rgba(228,123,54,.14); }
#qp-blog .cyber-eye-inner { position: absolute; inset: 32%; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; background: radial-gradient(circle, rgba(228,123,54,.25), transparent 72%); }
#qp-blog .cyber-iris { position: absolute; inset: 39%; border: 2px solid #ffd0aa; border-radius: 50%; background: radial-gradient(circle, rgba(228,123,54,.45), rgba(34,51,74,.6)); box-shadow: 0 0 26px rgba(228,123,54,.35); }
#qp-blog .cyber-pupil { position: absolute; inset: 45%; border-radius: 50%; background: #fff; box-shadow: 0 0 18px rgba(255,255,255,.8); }
#qp-blog .cyber-matrix-rain { position: absolute; width: 90%; height: 1px; left: 5%; top: 50%; background: linear-gradient(90deg, transparent, rgba(255,208,170,.6), transparent); }
#qp-blog .float-icon { position: absolute; z-index: 2; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.2); border-radius: 13px; color: #ffd0aa; background: rgba(255,255,255,.1); box-shadow: 0 8px 20px rgba(0,0,0,.15); }
#qp-blog .float-icon-1 { top: 8%; left: 8%; }
#qp-blog .float-icon-2 { top: 12%; right: 5%; }
#qp-blog .float-icon-3 { bottom: 10%; left: 12%; }
#qp-blog .float-icon-4 { right: 14%; bottom: 5%; }
#qp-blog .section-label { margin: 0 0 .45rem; color: var(--qp-orange); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
#qp-blog .section-title { margin: .25rem 0 .75rem; color: var(--qp-navy); font-size: clamp(1.65rem, 3vw, 2.45rem); font-weight: 800; line-height: 1.2; }
#qp-blog .section-subtitle { max-width: 760px; margin: 0 auto 1.6rem; color: var(--qp-muted); font-size: 1rem; line-height: 1.65; }
#qp-blog .info-aside { margin: 1.5rem auto; padding: 1.25rem 1.4rem; border: 1px solid #fed7aa; border-left: 4px solid var(--qp-orange); border-radius: 14px; color: #334155; background: #fff7ed; }
#qp-blog .info-aside h3 { margin: 0 0 .8rem; color: var(--qp-navy); }
#qp-blog .info-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .8rem; }
#qp-blog .info-item { display: flex; align-items: flex-start; gap: .75rem; min-width: 0; padding: .9rem; border: 1px solid var(--qp-line); border-radius: 12px; background: #fff; }
#qp-blog .info-icon { display: grid; flex: 0 0 40px; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: #fff; background: var(--qp-orange); }
#qp-blog .info-text { min-width: 0; color: #526174; line-height: 1.5; }
#qp-blog .info-text strong { color: var(--qp-navy); }
#qp-blog .ps-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; margin: 1.4rem 0; }
#qp-blog .ps-card { height: 100%; padding: 1.35rem; border: 1px solid var(--qp-line); border-radius: 18px; color: #526174; background: #fff; box-shadow: 0 10px 28px rgba(23,35,53,.07); }
#qp-blog .ps-card h3, #qp-blog .ps-card h4 { margin: .75rem 0 .45rem; color: var(--qp-navy); }
#qp-blog .ps-problem { border-color: #fecaca; background: #fff8f7; }
#qp-blog .ps-solution { border-color: #bbf7d0; background: #f6fdf8; }
#qp-blog .ps-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; color: #fff; background: var(--qp-orange); }
#qp-blog .highlight-box { margin: 1.2rem 0; padding: 1rem 1.2rem; border: 1px solid #fed7aa; border-left: 4px solid var(--qp-orange); border-radius: 12px; color: #475569; background: #fff7ed; }
#qp-blog .comparison-wrap { max-width: 100%; margin: 1.25rem 0 2rem; overflow-x: auto; border: 1px solid var(--qp-line); border-radius: 16px; background: #fff; box-shadow: 0 10px 28px rgba(23,35,53,.06); -webkit-overflow-scrolling: touch; }
#qp-blog .comparison-table { width: 100%; min-width: 640px; margin: 0; border-collapse: collapse; color: #475569; background: #fff; }
#qp-blog .comparison-table th, #qp-blog .comparison-table td { padding: .9rem 1rem; border-bottom: 1px solid var(--qp-line); text-align: left; vertical-align: top; }
#qp-blog .comparison-table th { color: #fff; background: var(--qp-navy); font-size: .92rem; font-weight: 750; }
#qp-blog .comparison-table tbody tr:nth-child(even) { background: #f8fafc; }
#qp-blog .comparison-table tbody tr:last-child td { border-bottom: 0; }
#qp-blog .comparison-table td:first-child { color: var(--qp-navy); font-weight: 700; }
#qp-blog .cross { color: #b91c1c; font-weight: 800; }
#qp-blog .check { color: #15803d; font-weight: 800; }
#qp-blog .features-section, #qp-blog .process-section { margin: 2.5rem auto; padding: clamp(1.2rem, 3vw, 2.25rem) 0; }
#qp-blog .features-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; margin-top: 1.35rem; }
#qp-blog .feature-card { min-width: 0; height: 100%; padding: 1.35rem; border: 1px solid var(--qp-line); border-radius: 18px; color: #526174; background: #fff; box-shadow: 0 12px 28px rgba(23,35,53,.07); transition: transform .2s ease, box-shadow .2s ease; }
#qp-blog .feature-card:hover { transform: translateY(-3px); box-shadow: 0 18px 34px rgba(23,35,53,.12); }
#qp-blog .feature-card h3, #qp-blog .feature-card h4 { margin: .8rem 0 .45rem; color: var(--qp-navy); font-size: 1.1rem; line-height: 1.35; }
#qp-blog .feature-card p { margin: 0; color: #526174; font-size: .94rem; line-height: 1.6; }
#qp-blog .feature-icon-wrap { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #fed7aa; border-radius: 14px; color: #9a4b1d; background: #fff0e5; }
#qp-blog .timeline { position: relative; display: grid; gap: 1rem; max-width: 940px; margin: 1.5rem auto 0; }
#qp-blog .timeline::before { content: ''; position: absolute; top: 22px; bottom: 22px; left: 22px; width: 2px; background: linear-gradient(var(--qp-orange), #fed7aa); }
#qp-blog .tl-item { position: relative; display: grid; grid-template-columns: 46px minmax(0,1fr); gap: .9rem; align-items: start; }
#qp-blog .tl-dot { position: relative; z-index: 1; display: block; width: 18px; height: 18px; margin: 15px auto 0; border: 4px solid #fff; border-radius: 50%; background: var(--qp-orange); box-shadow: 0 0 0 2px rgba(228,123,54,.2); }
#qp-blog .tl-body { min-width: 0; padding: 1rem 1.15rem; border: 1px solid var(--qp-line); border-radius: 15px; color: #526174; background: #fff; box-shadow: 0 8px 24px rgba(23,35,53,.06); }
#qp-blog .tl-body h3, #qp-blog .tl-body h4 { margin: .2rem 0 .45rem; color: var(--qp-navy); }
#qp-blog .tl-tag { display: inline-flex; margin-bottom: .45rem; padding: .25rem .6rem; border-radius: 999px; color: #9a4b1d; background: #fff0e5; font-size: .75rem; font-weight: 800; }
#qp-blog .quote-section { position: relative; margin: 2rem auto; padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid rgba(255,255,255,.08); border-radius: 22px; color: #e8eef6; background: linear-gradient(135deg, #172335, #2d4663); box-shadow: 0 16px 34px rgba(23,35,53,.16); }
#qp-blog .quote-mark { color: #ffc08c; font-size: 3.2rem; font-weight: 800; line-height: .8; }
#qp-blog .quote-text { margin: .7rem 0; color: #fff; font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 600; line-height: 1.55; }
#qp-blog .quote-author { margin: 0; color: #cbd5e1; font-size: .9rem; }
#qp-blog .related-links { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .85rem; margin: 1.25rem 0; }
#qp-blog .link-card { display: flex; align-items: flex-start; gap: .8rem; min-width: 0; padding: 1rem; border: 1px solid var(--qp-line); border-radius: 14px; color: var(--qp-navy); text-decoration: none; background: #fff; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
#qp-blog .link-card:hover { transform: translateY(-2px); border-color: #fdba74; box-shadow: 0 10px 24px rgba(23,35,53,.08); }
#qp-blog .link-card-icon { display: grid; flex: 0 0 40px; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: #fff; background: var(--qp-orange); }
#qp-blog .link-card-text { min-width: 0; color: var(--qp-navy); font-weight: 750; line-height: 1.4; }
#qp-blog .link-card-text span { display: block; margin-top: .25rem; color: var(--qp-muted); font-size: .83rem; font-weight: 400; }
#qp-blog .faq-section { max-width: 1000px; margin: 2.5rem auto; padding: clamp(1.2rem, 3vw, 2rem); border: 1px solid #dbe5ef; border-radius: 22px; background: #f8fafc; }
#qp-blog .faq-section > h2 { margin-top: 0; color: var(--qp-navy); }
#qp-blog .faq-item { margin-top: .75rem; padding: 1rem 1.1rem; border: 1px solid var(--qp-line); border-radius: 13px; color: #526174; background: #fff; }
#qp-blog .faq-item h3 { display: flex; align-items: flex-start; gap: .55rem; margin: 0 0 .5rem; color: var(--qp-navy); font-size: 1rem; line-height: 1.45; }
#qp-blog .faq-item p { margin: 0; color: #526174; line-height: 1.6; }
#qp-blog .faq-q-icon { flex: 0 0 auto; color: var(--qp-orange); }
#qp-blog .cta-section { margin: 2.5rem auto; padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: 22px; color: #fff; background: linear-gradient(135deg, #172335, #2d4663); text-align: center; box-shadow: 0 18px 38px rgba(23,35,53,.16); }
#qp-blog .cta-section h2 { margin: 0 0 .55rem; color: #fff; }
#qp-blog .cta-section p { max-width: 760px; margin: 0 auto 1.1rem; color: #d4deea; }
#qp-blog .cta-buttons { display: flex; justify-content: center; flex-wrap: wrap; gap: .75rem; }
#qp-blog .cta-buttons .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; padding: .7rem 1.05rem; border: 1px solid transparent; border-radius: 10px; color: #fff; background: var(--qp-orange); font-weight: 750; text-decoration: none; }
#qp-blog .cta-buttons .btn-white { color: var(--qp-navy); background: #fff; }
#qp-blog .cta-buttons .btn-outline-white { border-color: rgba(255,255,255,.55); color: #fff; background: transparent; }
#qp-blog .cta-buttons .btn:hover { filter: brightness(1.06); }
#qp-blog a:focus-visible, #qp-blog button:focus-visible, #qp-blog summary:focus-visible { outline: 3px solid #f59e0b; outline-offset: 3px; }
@media (max-width: 900px) {
  #qp-blog .features-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  #qp-blog .hero-content { max-width: 100%; }
  #qp-blog .cyber-eye-container { right: -2%; opacity: .35; }
}
@media (max-width: 640px) {
  #qp-blog .container, #qp-blog .wide-container { width: min(calc(100% - 1.25rem), 1120px); }
  #qp-blog .hero { min-height: 0; margin-bottom: 1.5rem; padding: 1.55rem 1.1rem; border-radius: 19px; }
  #qp-blog .hero::before { right: 0; bottom: -140px; width: 220px; height: 220px; box-shadow: none; }
  #qp-blog .hero-content h1 { max-width: 16ch; font-size: clamp(1.8rem, 8vw, 2.45rem); }
  #qp-blog .hero-stats-row { grid-template-columns: 1fr; gap: .55rem; }
  #qp-blog .cyber-eye-container { top: auto; right: .25rem; bottom: .25rem; width: 120px; opacity: .14; transform: none; }
  #qp-blog .info-grid, #qp-blog .ps-grid, #qp-blog .features-grid, #qp-blog .related-links { grid-template-columns: 1fr; }
  #qp-blog .comparison-wrap { max-width: 100%; }
  #qp-blog .comparison-table { min-width: 600px; }
  #qp-blog .timeline { gap: .75rem; }
  #qp-blog .timeline::before { left: 18px; }
  #qp-blog .tl-item { grid-template-columns: 38px minmax(0,1fr); gap: .55rem; }
  #qp-blog .tl-dot { margin-top: 14px; }
  #qp-blog .tl-body { padding: .9rem; }
  #qp-blog .faq-section { padding: 1rem; border-radius: 16px; }
  #qp-blog .faq-item { padding: .9rem; }
  #qp-blog .cta-buttons { flex-direction: column; }
  #qp-blog .cta-buttons .btn { width: 100%; }
}
/* WCAG contrast-safe text and icon treatments; retain the brand hue for decorative accents. */
#qp-blog a { color: #9a4b1d; }
#qp-blog .section-label, #qp-blog .text-orange { color: #9a4b1d; }
#qp-blog .info-icon, #qp-blog .ps-icon, #qp-blog .link-card-icon, #qp-blog .qp-link-icon { background: #9a4b1d; }
#qp-blog .cta-buttons .btn:not(.btn-white):not(.btn-outline-white) { color: #fff; background: #9a4b1d; }
#qp-blog .qp-cta-btn, #qp-blog .qp-cta-actions a { color: #fff; background: #9a4b1d; }
#qp-blog .qp-cta-actions .qp-secondary { border: 1px solid rgba(255,255,255,.55); color: #fff; background: transparent; }
#qp-blog .qp-check-input:checked + .qp-check-box { border-color: #9a4b1d; color: #fff; background: #9a4b1d; }
@media (prefers-reduced-motion: reduce) {
  #qp-blog .feature-card, #qp-blog .link-card { transition: none; }
  #qp-blog .feature-card:hover, #qp-blog .link-card:hover { transform: none; }
}