/* Publishing Center showcase — public-site visual demonstration only. */
.solutions-publish-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 20%, rgba(132, 73, 255, .17), transparent 26rem),
    radial-gradient(circle at 88% 58%, rgba(16, 184, 192, .12), transparent 30rem),
    #080914;
}

.solutions-publish-section::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: .38;
  background-image: radial-gradient(rgba(203, 187, 255, .7) 1px, transparent 1.2px);
  background-size: 28px 28px;
  mask-image: linear-gradient(to bottom, transparent, #000 17%, #000 83%, transparent);
}

.solutions-publish-section .solutions-shell { position: relative; }
.solutions-publish-heading { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(18rem, .9fr); gap: 2rem; align-items: end; margin-bottom: 2rem; }
.solutions-publish-heading h2 { max-width: 15ch; margin: .35rem 0 0; color: #fff; }
.solutions-publish-heading p { max-width: 39rem; margin: 0 0 .3rem; color: #c6c9da; line-height: 1.7; }

.solutions-publish-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-bottom: 1.35rem; }
.solutions-publish-benefit { padding: 1rem; border: 1px solid rgba(177, 149, 255, .27); border-radius: 1rem; background: rgba(20, 19, 43, .72); box-shadow: 0 18px 40px rgba(0, 0, 0, .13); }
.solutions-publish-benefit span { display: inline-grid; width: 2.15rem; height: 2.15rem; place-items: center; border-radius: .7rem; background: rgba(126, 87, 255, .18); }
.solutions-publish-benefit strong { display: block; margin-top: .65rem; color: #f7f5ff; font-size: .95rem; }
.solutions-publish-benefit p { margin: .35rem 0 0; color: #b9b9cb; font-size: .84rem; line-height: 1.48; }

.solutions-publish-demo { border: 1px solid rgba(159, 128, 255, .4); border-radius: 1.45rem; padding: clamp(1rem, 2.6vw, 2rem); background: rgba(8, 9, 21, .94); box-shadow: 0 30px 80px rgba(14, 6, 44, .44), inset 0 1px rgba(255,255,255,.05); }
.solutions-publish-demo-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.solutions-publish-demo-bar strong { color: #fff; font-size: 1.08rem; }
.solutions-publish-demo-bar span { color: #a999f6; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.solutions-publish-demo-bar button { border: 0; border-radius: 999px; padding: .66rem .95rem; background: linear-gradient(110deg, #8748f7, #5835d5); color: #fff; font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; box-shadow: 0 8px 24px rgba(120, 65, 245, .28); transition: transform .2s ease, box-shadow .2s ease; }
.solutions-publish-demo-bar button:hover, .solutions-publish-tabs button:hover { transform: translateY(-2px); }

.solutions-publish-hero { display: grid; grid-template-columns: minmax(0, 1.24fr) minmax(14rem, .76fr); gap: 1rem; padding: clamp(1.15rem, 3vw, 2rem); border: 1px solid rgba(154, 125, 255, .58); border-radius: 1.2rem; background: linear-gradient(110deg, #6431d6 0%, #145e9c 53%, #125f5d 100%); overflow: hidden; }
.solutions-publish-eyebrow { display: block; color: #e9e2ff; font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.solutions-publish-hero h3 { max-width: 18ch; margin: .65rem 0; color: #fff; font-size: clamp(1.5rem, 3vw, 2.65rem); line-height: 1.08; }
.solutions-publish-hero p { max-width: 44rem; margin: 0; color: #f1f4ff; line-height: 1.55; }
.solutions-publish-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }
.solutions-publish-actions button, .solutions-publish-tabs button { border: 1px solid rgba(235, 227, 255, .4); border-radius: 999px; padding: .57rem .82rem; color: #fff; background: rgba(10, 10, 35, .16); font: inherit; font-size: .79rem; font-weight: 700; cursor: pointer; transition: transform .2s ease, background .2s ease; }
.solutions-publish-actions button:first-child { border-color: transparent; background: #9255ff; }
.solutions-publish-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; align-content: center; }
.solutions-publish-stat { min-height: 5.2rem; padding: .82rem; border: 1px solid rgba(222, 239, 255, .36); border-radius: 1rem; background: rgba(4, 18, 39, .3); }
.solutions-publish-stat span { color: #c7e7ed; font-size: .75rem; }
.solutions-publish-stat strong { display: block; margin-top: .35rem; color: #fff; font-size: 1.7rem; }

.solutions-publish-tabs { display: flex; flex-wrap: wrap; gap: .65rem; margin: 1.2rem 0; }
.solutions-publish-tabs button { color: #d9d6ed; background: transparent; }
.solutions-publish-tabs button[aria-pressed="true"] { border-color: #8e5dff; color: #fff; background: rgba(121, 68, 244, .2); box-shadow: inset 0 0 0 1px rgba(164, 125, 255, .12); }
.solutions-publish-workspace { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(16rem, .96fr); gap: 1rem; }
.solutions-publish-form, .solutions-publish-preview { border: 1px solid rgba(142, 115, 217, .31); border-radius: 1rem; padding: 1rem; background: rgba(19, 18, 37, .82); }
.solutions-publish-form > strong, .solutions-publish-preview > strong { display: block; margin-bottom: .8rem; color: #f7f5ff; font-size: .92rem; }
.solutions-publish-channels { display: flex; gap: .6rem; margin-bottom: .8rem; }
.solutions-publish-channel { flex: 1; padding: .7rem; border: 1px solid rgba(173, 149, 255, .25); border-radius: .75rem; background: rgba(35, 31, 61, .74); color: #e8e6f5; font-size: .78rem; }
.solutions-publish-channel small { display: block; margin-top: .22rem; color: #7ee1b2; font-size: .68rem; }
.solutions-publish-channel--facebook small { color: #efc36f; }
.solutions-publish-source { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; margin-bottom: .75rem; }
.solutions-publish-source span { padding: .48rem .4rem; border: 1px solid rgba(171, 147, 245, .2); border-radius: .55rem; color: #c5c0dd; font-size: .67rem; text-align: center; }
.solutions-publish-select { display: flex; align-items: center; justify-content: space-between; padding: .72rem; border: 1px solid rgba(165, 144, 232, .28); border-radius: .65rem; color: #d8d4e7; font-size: .77rem; }
.solutions-publish-caption { min-height: 5.2rem; margin-top: .65rem; padding: .72rem; border: 1px solid rgba(165, 144, 232, .2); border-radius: .65rem; color: #d8d4e7; font-size: .78rem; line-height: 1.5; }
.solutions-publish-form-footer { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .75rem; color: #9994af; font-size: .7rem; }
.solutions-publish-ai-button { border: 0; border-radius: .6rem; padding: .56rem .7rem; background: rgba(141, 83, 255, .24); color: #daccff; font: inherit; font-size: .72rem; font-weight: 700; }
.solutions-publish-preview-card { overflow: hidden; border: 1px solid rgba(255,255,255,.17); border-radius: .85rem; background: #fff; color: #272431; }
.solutions-publish-post-head { display: flex; align-items: center; gap: .55rem; padding: .7rem; font-size: .73rem; }
.solutions-publish-avatar { display: grid; width: 1.65rem; height: 1.65rem; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #873bff, #1bb9df); color: #fff; font-weight: 800; }
.solutions-publish-post-head small { display: block; color: #7a7685; }
.solutions-publish-art { position: relative; min-height: 12rem; padding: 1rem; overflow: hidden; background: linear-gradient(145deg, #12144a 0%, #6936a6 52%, #1aa0b7 120%); }
.solutions-publish-art::before, .solutions-publish-art::after { position: absolute; content: ""; border-radius: 50%; filter: blur(1px); }
.solutions-publish-art::before { width: 13rem; height: 13rem; right: -4rem; top: -6rem; background: radial-gradient(circle, rgba(242, 206, 255, .95), rgba(151, 72, 255, .05) 65%); }
.solutions-publish-art::after { width: 11rem; height: 11rem; left: -4rem; bottom: -6rem; background: radial-gradient(circle, rgba(42, 227, 246, .75), rgba(25, 95, 214, .05) 68%); }
.solutions-publish-art span { position: relative; z-index: 1; display: block; max-width: 11ch; color: #fff; font-size: 1.3rem; font-weight: 800; line-height: 1.05; }
.solutions-publish-art small { position: absolute; z-index: 1; right: .9rem; bottom: .75rem; color: rgba(255,255,255,.82); font-size: .65rem; }
.solutions-publish-post-copy { padding: .72rem; font-size: .72rem; line-height: 1.48; }
.solutions-publish-post-copy span { color: #7144bc; }
.solutions-publish-note { margin: 1.15rem 0 0; color: #9e9ab2; font-size: .78rem; line-height: 1.55; text-align: center; }

@media (max-width: 760px) {
  .solutions-publish-heading, .solutions-publish-hero, .solutions-publish-workspace { grid-template-columns: 1fr; }
  .solutions-publish-heading { gap: .85rem; }
  .solutions-publish-heading h2 { max-width: 20ch; }
  .solutions-publish-benefits { grid-template-columns: 1fr; }
  .solutions-publish-hero h3 { max-width: 20ch; }
  .solutions-publish-workspace { gap: .75rem; }
}

@media (max-width: 440px) {
  .solutions-publish-demo { padding: .75rem; }
  .solutions-publish-demo-bar { align-items: flex-start; flex-wrap: wrap; }
  .solutions-publish-stats, .solutions-publish-source { grid-template-columns: 1fr 1fr; }
  .solutions-publish-source span:last-child { grid-column: span 2; }
  .solutions-publish-channels { flex-direction: column; }
}

/* Compact two-column presentation used on the solutions pages. */
.solutions-publish-layout { display: grid; grid-template-columns: minmax(17rem, .8fr) minmax(25rem, 1.2fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.solutions-publish-copy h2 { max-width: 13ch; margin: .45rem 0 1rem; color: #fff; }
.solutions-publish-copy > p { max-width: 34rem; margin: 0; color: #c6c9da; line-height: 1.7; }
.solutions-publish-points { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.solutions-publish-points span { padding: .46rem .68rem; border: 1px solid rgba(161, 132, 250, .37); border-radius: 999px; color: #ded4ff; background: rgba(109, 65, 215, .13); font-size: .76rem; }
.solutions-publish-preview { padding: 0; overflow: hidden; border-color: rgba(159, 128, 255, .48); box-shadow: 0 26px 70px rgba(14, 6, 44, .4); }
.solutions-publish-preview > header { display: flex; align-items: center; gap: .6rem; padding: .82rem 1rem; border-bottom: 1px solid rgba(172, 145, 243, .25); background: linear-gradient(90deg, rgba(106, 54, 212, .55), rgba(13, 108, 140, .36)); }
.solutions-publish-preview > header span { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border-radius: .55rem; background: linear-gradient(135deg, #9255ff, #28b8d6); color: #fff; font-size: .65rem; font-weight: 800; }
.solutions-publish-preview > header strong { margin: 0; color: #fff; font-size: .88rem; }
.solutions-publish-preview > header small { margin-left: auto; color: #d9d2ff; font-size: .68rem; }
.solutions-publish-preview-body { display: grid; grid-template-columns: minmax(12rem, .8fr) minmax(13rem, 1fr); gap: .8rem; padding: .9rem; }
.solutions-publish-preview-info { display: flex; flex-direction: column; align-items: flex-start; padding: .3rem .1rem; }
.solutions-publish-preview-info > strong { color: #f6f3ff; font-size: .92rem; }
.solutions-publish-preview-info > p { margin: .45rem 0 .8rem; color: #bbb6ce; font-size: .75rem; line-height: 1.5; }
.solutions-publish-preview-tags { display: flex; flex-wrap: wrap; gap: .38rem; }
.solutions-publish-preview-tags span { padding: .38rem .45rem; border: 1px solid rgba(169, 144, 236, .25); border-radius: .5rem; color: #d9d2ef; font-size: .65rem; }
.solutions-publish-preview-info button { margin-top: auto; border: 0; border-radius: .55rem; padding: .56rem .7rem; background: linear-gradient(100deg, #8a4bfa, #6554df); color: #fff; font: inherit; font-size: .7rem; font-weight: 800; }
.solutions-publish-preview-info > small { margin-top: .65rem; color: #83d9b2; font-size: .64rem; }
.solutions-publish-preview .solutions-publish-preview-card { align-self: start; }
.solutions-publish-preview .solutions-publish-art { min-height: 9rem; }

@media (max-width: 760px) {
  .solutions-publish-layout { grid-template-columns: 1fr; gap: 1.5rem; }
  .solutions-publish-copy h2 { max-width: 18ch; }
}

@media (max-width: 440px) {
  .solutions-publish-preview-body { grid-template-columns: 1fr; }
  .solutions-publish-preview-info { min-height: 9rem; }
  .solutions-publish-preview .solutions-publish-preview-card { width: 100%; }
}

/* Social post preview: mirrors the product-card composition used by the Widget showcase. */
.solutions-publish-copy h2 { max-width: 15ch; }
.solutions-publish-steps { display: grid; gap: .65rem; margin-top: 1.35rem; }
.solutions-publish-steps > div { display: flex; align-items: center; gap: .75rem; padding: .65rem .75rem; border: 1px solid rgba(167, 138, 244, .22); border-radius: .75rem; background: rgba(22, 20, 47, .57); }
.solutions-publish-steps b { display: grid; width: 1.8rem; height: 1.8rem; flex: 0 0 auto; place-items: center; border-radius: .55rem; background: linear-gradient(135deg, #8f52fb, #3e86dd); color: #fff; font-size: .66rem; }
.solutions-publish-steps strong { display: block; color: #f5f2ff; font-size: .78rem; }
.solutions-publish-steps small { display: block; margin-top: .12rem; color: #b7b2cb; font-size: .69rem; line-height: 1.35; }
.solutions-publish-preview > header small { color: #d7d0ff; }
.solutions-social-stage { display: grid; grid-template-columns: minmax(10rem, .86fr) minmax(12rem, 1.14fr); align-items: start; gap: clamp(.7rem, 2vw, 1.25rem); padding: clamp(.75rem, 2vw, 1.15rem); background: #06070d; }
.solutions-social-card { overflow: hidden; border: 1px solid #d9d9df; border-radius: .85rem; background: #fff; color: #27272c; font-family: Arial, Helvetica, sans-serif; box-shadow: 0 12px 28px rgba(0,0,0,.35); }
.solutions-social-card > header { display: flex; align-items: center; gap: .52rem; min-height: 3.35rem; padding: .56rem .65rem; }
.solutions-social-avatar { display: grid; width: 1.65rem; height: 1.65rem; flex: 0 0 auto; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #ed4d55, #e71b7d 58%, #6755ec); color: #fff; font-size: .72rem; font-weight: 800; }
.solutions-social-card--facebook .solutions-social-avatar { background: #2076ef; }
.solutions-social-card header b { display: block; color: #25252a; font-size: .69rem; line-height: 1.1; }
.solutions-social-card header small { display: block; margin-top: .12rem; color: #77777c; font-size: .61rem; }
.solutions-social-card header i { margin-left: auto; color: #25252a; font-size: .82rem; font-style: normal; letter-spacing: .05em; }
.solutions-social-art { overflow: hidden; background: #070814; aspect-ratio: 1; }
.solutions-social-art-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.solutions-social-reactions { padding: .48rem .65rem .25rem; color: #5f6066; font-size: .82rem; }
.solutions-social-reactions span { float: right; }
.solutions-social-card > p { margin: .16rem .65rem .2rem; color: #34343a; font-size: .63rem; line-height: 1.4; }
.solutions-social-card > em { display: block; padding: 0 .65rem .65rem; color: #694ac9; font-size: .6rem; font-style: normal; }
.solutions-social-caption { min-height: 5.1rem; padding-top: .12rem; }
.solutions-social-card--facebook footer { display: flex; justify-content: space-around; gap: .2rem; padding: .52rem .25rem; border-top: 1px solid #e3e3e8; color: #67686f; font-size: .61rem; }
.solutions-social-card--facebook footer span { white-space: nowrap; }

@media (max-width: 760px) {
  .solutions-social-stage { grid-template-columns: minmax(8rem, .82fr) minmax(10rem, 1.18fr); }
  .solutions-publish-copy h2 { max-width: 18ch; }
}

@media (max-width: 440px) {
  .solutions-social-stage { gap: .5rem; padding: .5rem; }
  .solutions-social-card > header { min-height: 2.8rem; padding: .42rem; }
  .solutions-social-card header i { display: none; }
  .solutions-social-card--instagram > p, .solutions-social-card--instagram > em, .solutions-social-reactions { display: none; }
  .solutions-social-caption { min-height: 4.2rem; }
  .solutions-social-card--facebook footer { font-size: .53rem; }
}