/* QuickMerge premium finish — intentionally reuses the existing colour system. */
:root {
  --qm-hairline: rgba(15, 23, 42, .09);
  --qm-shadow-soft: 0 1px 2px rgba(15, 23, 42, .04), 0 18px 48px rgba(15, 23, 42, .07);
  --qm-shadow-lift: 0 8px 20px rgba(15, 23, 42, .07), 0 24px 56px rgba(79, 70, 229, .09);
}

html { text-rendering: optimizeLegibility; }
body { -webkit-font-smoothing: antialiased; }
header { border-bottom-color: rgba(15, 23, 42, .08) !important; }
.nav { min-height: 74px; }
.nav-links a, .mobile-menu a { letter-spacing: -.01em; }

.tool-interface,
.content-block,
.feature-card,
.tool-card,
.blog-card,
.contact-card,
.info-box {
  border-color: var(--qm-hairline) !important;
  box-shadow: var(--qm-shadow-soft);
}
.tool-interface { position: relative; overflow: hidden; }
.tool-interface::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-accent, #4f46e5), var(--secondary-accent, #0d9488));
  opacity: .9;
}
.tool-card:hover,
.feature-card:hover,
.blog-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--qm-shadow-lift);
}
.drag-drop-area {
  border-width: 1.5px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}
.drag-drop-area:hover { transform: translateY(-1px); }
.tool-btn, .btn, button { letter-spacing: -.01em; }
.tool-btn { min-height: 48px; font-weight: 700 !important; }

/* Blog hub */
.qm-blog-hero {
  padding: clamp(5.5rem, 10vw, 8.5rem) 1.5rem clamp(3.5rem, 7vw, 5.5rem);
  background:
    radial-gradient(circle at 14% 18%, rgba(13,148,136,.13), transparent 28rem),
    radial-gradient(circle at 88% 12%, rgba(79,70,229,.15), transparent 31rem),
    #f5f7fa;
  border-bottom: 1px solid var(--qm-hairline);
}
.qm-blog-hero__inner { max-width: 1120px; margin: 0 auto; }
.qm-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: 1.25rem;
  color: var(--primary-accent, #4f46e5);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.qm-eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; }
.qm-blog-hero h1 {
  max-width: 820px;
  margin: 0 0 1.25rem;
  color: #0f172a;
  font-size: clamp(2.65rem, 7vw, 5.4rem);
  line-height: .98;
  letter-spacing: -.055em;
}
.qm-blog-hero p { max-width: 720px; margin: 0; color: #475569; font-size: clamp(1.06rem, 2vw, 1.28rem); line-height: 1.72; }
.qm-blog-index { max-width: 1180px; margin: 0 auto; padding: 4rem 1.5rem 6rem; }
.qm-blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.35rem; }
.qm-blog-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--qm-hairline);
  border-radius: 20px;
  box-shadow: var(--qm-shadow-soft);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.qm-blog-card:hover { transform: translateY(-5px); border-color: rgba(79,70,229,.24); box-shadow: var(--qm-shadow-lift); }
.qm-blog-card__image { aspect-ratio: 16 / 9; overflow: hidden; background: #eef2f7; }
.qm-blog-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.qm-blog-card:hover img { transform: scale(1.025); }
.qm-blog-card__body { display: flex; flex: 1; flex-direction: column; padding: 1.35rem; }
.qm-blog-card__meta { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: .8rem; color: #64748b; font-size: .78rem; font-weight: 700; }
.qm-blog-card__meta span:first-child { color: var(--primary-accent, #4f46e5); }
.qm-blog-card h2 { margin: 0 0 .7rem; color: #0f172a; font-size: 1.25rem; line-height: 1.25; letter-spacing: -.025em; }
.qm-blog-card p { margin: 0 0 1.1rem; color: #475569; font-size: .94rem; line-height: 1.65; }
.qm-blog-card__link { margin-top: auto; color: var(--primary-accent, #4f46e5); font-weight: 800; font-size: .9rem; }

/* Long-form editorial pages */
.qm-article-hero {
  padding: clamp(5.5rem, 9vw, 8rem) 1.5rem 3.4rem;
  background:
    radial-gradient(circle at 10% 8%, rgba(13,148,136,.13), transparent 28rem),
    radial-gradient(circle at 88% 20%, rgba(79,70,229,.15), transparent 30rem),
    #f5f7fa;
  border-bottom: 1px solid var(--qm-hairline);
}
.qm-article-hero__inner { max-width: 900px; margin: 0 auto; }
.qm-breadcrumb { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 1.5rem; color: #64748b; font-size: .84rem; font-weight: 700; }
.qm-breadcrumb a { color: #475569; }
.qm-breadcrumb span:not(:last-child)::after { content: "/"; margin-left: .55rem; color: #94a3b8; }
.qm-article-hero h1 { margin: 0 0 1.35rem; color: #0f172a; font-size: clamp(2.4rem, 6.4vw, 4.65rem); line-height: 1.02; letter-spacing: -.052em; }
.qm-article-dek { max-width: 790px; margin: 0 0 1.45rem; color: #475569; font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.72; }
.qm-article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; color: #64748b; font-size: .86rem; font-weight: 650; }
.qm-article-meta a { color: #334155; font-weight: 800; }
.qm-article-meta span:not(:last-child)::after { content: "•"; margin-left: .7rem; color: #94a3b8; }
.qm-article-shell { max-width: 1160px; margin: 0 auto; padding: 3rem 1.5rem 6rem; }
.qm-article-cover { max-width: 1040px; margin: 0 auto 3.2rem; overflow: hidden; border: 1px solid var(--qm-hairline); border-radius: 24px; box-shadow: var(--qm-shadow-lift); }
.qm-article-cover img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.qm-article-layout { display: grid; grid-template-columns: minmax(0, 730px) 270px; justify-content: center; gap: 4rem; }
.qm-article-body { min-width: 0; color: #334155; font-size: 1.06rem; line-height: 1.82; }
.qm-article-body > p:first-child { color: #1e293b; font-size: 1.19rem; line-height: 1.75; }
.qm-article-body h2 { margin: 3.1rem 0 1rem; color: #0f172a; font-size: clamp(1.65rem, 3vw, 2.15rem); line-height: 1.18; letter-spacing: -.035em; }
.qm-article-body h3 { margin: 2rem 0 .65rem; color: #0f172a; font-size: 1.3rem; line-height: 1.3; letter-spacing: -.02em; }
.qm-article-body p { margin: 0 0 1.28rem; }
.qm-article-body a { color: #4338ca; font-weight: 700; text-decoration: underline; text-decoration-color: rgba(79,70,229,.3); text-underline-offset: 3px; }
.qm-article-body ul, .qm-article-body ol { margin: .8rem 0 1.6rem; padding-left: 1.35rem; }
.qm-article-body li { margin: .62rem 0; padding-left: .35rem; }
.qm-article-summary, .qm-article-note, .qm-article-warning {
  margin: 1.8rem 0 2rem;
  padding: 1.35rem 1.45rem;
  border: 1px solid rgba(79,70,229,.16);
  border-left: 4px solid var(--primary-accent, #4f46e5);
  border-radius: 4px 15px 15px 4px;
  background: rgba(79,70,229,.045);
}
.qm-article-note { border-color: rgba(13,148,136,.18); border-left-color: var(--secondary-accent, #0d9488); background: rgba(13,148,136,.045); }
.qm-article-warning { border-color: rgba(245,158,11,.22); border-left-color: #f59e0b; background: rgba(245,158,11,.06); }
.qm-article-summary strong, .qm-article-note strong, .qm-article-warning strong { color: #0f172a; }
.qm-table-wrap { margin: 1.5rem 0 2rem; overflow-x: auto; border: 1px solid var(--qm-hairline); border-radius: 14px; box-shadow: 0 8px 30px rgba(15,23,42,.045); }
.qm-table-wrap table { width: 100%; min-width: 590px; border-collapse: collapse; background: #fff; font-size: .94rem; }
.qm-table-wrap th, .qm-table-wrap td { padding: .85rem 1rem; border-bottom: 1px solid var(--qm-hairline); text-align: left; vertical-align: top; }
.qm-table-wrap th { color: #0f172a; background: #f8fafc; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; }
.qm-table-wrap tr:last-child td { border-bottom: 0; }
.qm-article-aside { position: sticky; top: 96px; align-self: start; }
.qm-aside-card { padding: 1.25rem; border: 1px solid var(--qm-hairline); border-radius: 16px; background: #fff; box-shadow: var(--qm-shadow-soft); }
.qm-aside-card + .qm-aside-card { margin-top: 1rem; }
.qm-aside-card h2 { margin: 0 0 .8rem; color: #0f172a; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; }
.qm-aside-card ul { margin: 0; padding: 0; list-style: none; }
.qm-aside-card li + li { margin-top: .65rem; }
.qm-aside-card a { color: #475569; font-size: .88rem; font-weight: 700; line-height: 1.4; }
.qm-aside-card a:hover { color: var(--primary-accent, #4f46e5); }
.qm-author-card { display: grid; grid-template-columns: 72px 1fr; gap: 1rem; margin-top: 3.5rem; padding: 1.5rem; border: 1px solid var(--qm-hairline); border-radius: 18px; background: #fff; box-shadow: var(--qm-shadow-soft); }
.qm-author-card img { width: 72px; height: 72px; border-radius: 16px; object-fit: cover; }
.qm-author-card h2 { margin: 0 0 .3rem; font-size: 1.05rem; }
.qm-author-card p { margin: 0; color: #64748b; font-size: .9rem; line-height: 1.55; }
.qm-related { margin-top: 4rem; padding-top: 2.5rem; border-top: 1px solid var(--qm-hairline); }
.qm-related > h2 { margin: 0 0 1.25rem; color: #0f172a; font-size: 1.6rem; letter-spacing: -.025em; }
.qm-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.qm-related-link { padding: 1.1rem; border: 1px solid var(--qm-hairline); border-radius: 14px; background: #fff; box-shadow: 0 8px 28px rgba(15,23,42,.04); }
.qm-related-link small { display: block; margin-bottom: .35rem; color: var(--primary-accent, #4f46e5); font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.qm-related-link strong { color: #0f172a; line-height: 1.35; }
.qm-tool-guide-link { margin: 2rem 0; padding: 1.2rem 1.3rem; border: 1px solid rgba(79,70,229,.16); border-radius: 14px; background: rgba(79,70,229,.04); color: #334155; }
.qm-tool-guide-link strong { color: #0f172a; }
.qm-tool-guide-link a { color: #4338ca; font-weight: 800; }

@media (max-width: 980px) {
  .qm-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qm-article-layout { grid-template-columns: minmax(0, 730px); }
  .qm-article-aside { position: static; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); order: -1; }
  .qm-aside-card + .qm-aside-card { margin: 0 0 0 1rem; }
}
@media (max-width: 640px) {
  .nav { min-height: 66px; }
  .qm-blog-grid, .qm-related-grid { grid-template-columns: 1fr; }
  .qm-blog-hero, .qm-article-hero { padding-left: 1rem; padding-right: 1rem; }
  .qm-blog-index, .qm-article-shell { padding-left: 1rem; padding-right: 1rem; }
  .qm-article-cover { margin-bottom: 2.25rem; border-radius: 16px; }
  .qm-article-aside { display: block; }
  .qm-aside-card + .qm-aside-card { margin: 1rem 0 0; }
  .qm-author-card { grid-template-columns: 56px 1fr; padding: 1.1rem; }
  .qm-author-card img { width: 56px; height: 56px; border-radius: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .qm-blog-card, .qm-blog-card img, .tool-card, .feature-card { transition: none !important; }
}

/* Final mobile-shell guard: legacy route CSS must not resize the shared header. */
@media (max-width: 700px) {
  html body.qm-enhanced > header,
  html body.qm-enhanced > header:not(.qm-header) { min-height: 66px !important; }
  html body.qm-enhanced > header .nav { min-height: 65px !important; }
}