/* ==========================================================================
   SMAC inner-page layer: page hero, detail rows, industry list, prose, empty states.
   Reuses tokens.css and the shared sm-* components from style.css.
   ========================================================================== */

.sm-phero { position: relative; overflow: hidden; padding-block: var(--sm-s8) var(--sm-s7); color: #fff; background: radial-gradient(640px 280px at 92% 0%, rgba(20, 184, 230, 0.28), transparent 65%), linear-gradient(165deg, var(--sm-navy-950), var(--sm-navy-900)); }
.sm-phero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000); mask-image: linear-gradient(90deg, transparent 30%, #000); }
.sm-phero .sm-container { position: relative; }
.sm-phero h1 { margin-bottom: var(--sm-s3); font-size: clamp(2rem, 4.2vw, 3rem); font-weight: 800; color: #fff; }
.sm-phero p { max-width: 40em; margin: 0; font-size: var(--sm-fs-lg); color: rgba(255, 255, 255, 0.82); }
.sm-crumbs { display: flex; flex-wrap: wrap; gap: var(--sm-s2); margin-bottom: var(--sm-s4); font-size: var(--sm-fs-xs); color: rgba(255, 255, 255, 0.6); }
.sm-crumbs a { color: var(--sm-cyan); }

/* Service / product detail rows */
.sm-detail { display: grid; gap: var(--sm-s5); align-items: start; padding: var(--sm-s6) var(--sm-s5); margin-bottom: var(--sm-s4); border: 1px solid var(--sm-line); border-left: 3px solid var(--accent, var(--sm-royal)); border-radius: var(--sm-r-md); background: #fff; box-shadow: var(--sm-sh-1); scroll-margin-top: calc(var(--sm-header-h) + var(--sm-s5)); }
.sm-detail h2 { margin-bottom: var(--sm-s2); font-size: 1.5rem; }
.sm-detail p { color: var(--sm-muted); }
.sm-detail .sm-prod__tag { margin-bottom: var(--sm-s3); }
.sm-detail__mark { display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--sm-r-md); background: var(--sm-tint); color: var(--sm-royal); }
.sm-detail__mark svg { width: var(--sm-icon-lg); height: var(--sm-icon-lg); }
.sm-detail.sm-prod--shoppy, .sm-detail.sm-prod--erp, .sm-detail.sm-prod--crm, .sm-detail.sm-prod--hrms, .sm-detail.sm-prod--eims { border-top: 1px solid var(--sm-line); }
.sm-detail[class*='sm-prod--'] .sm-detail__mark { background: var(--accent); color: #fff; }
.sm-ticks { display: grid; gap: var(--sm-s2); font-size: var(--sm-fs-sm); }
.sm-ticks li { display: flex; gap: var(--sm-s3); align-items: flex-start; }
.sm-ticks svg { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--accent, var(--sm-royal)); }
@media (min-width: 860px) { .sm-detail { grid-template-columns: 72px 1.2fr 1fr; gap: var(--sm-s6); padding: var(--sm-s6); } }

.sm-note { margin: var(--sm-s5) 0 0; padding: var(--sm-s3) var(--sm-s4); border: 1px solid #f0d98a; border-radius: var(--sm-r-md); background: #fff8e1; font-size: var(--sm-fs-sm); color: #6b4e00; }

/* Text pages */
.sm-prose { max-width: 760px; }
.sm-prose h2 { margin-top: var(--sm-s6); font-size: 1.375rem; }
.sm-prose h2:first-child { margin-top: 0; }
.sm-prose p, .sm-prose li { color: var(--sm-muted); }

/* Empty state */
.sm-empty { max-width: 540px; margin: 0 auto; padding: var(--sm-s7) var(--sm-s5); border: 1.5px dashed #c3d2ec; border-radius: var(--sm-r-lg); background: #fff; text-align: center; }
.sm-empty .sm-icon { margin-bottom: var(--sm-s4); }
.sm-empty p { color: var(--sm-muted); }

.sm-cta-band { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sm-s5); padding: var(--sm-s6); border-radius: var(--sm-r-lg); color: rgba(255, 255, 255, 0.85); background: linear-gradient(135deg, var(--sm-navy-800), var(--sm-navy-950)); }
.sm-cta-band h2 { margin: 0 0 var(--sm-s2); color: #fff; font-size: 1.5rem; }
.sm-cta-band p { margin: 0; }
@media (min-width: 760px) { .sm-cta-band { flex-direction: row; align-items: center; justify-content: space-between; padding: var(--sm-s7); } }