.sm4 {
  --sm-red: #ff2828;
  --sm-black: #090909;
  --sm-panel: #111111;
  --sm-paper: #f2f0ec;
  --sm-ink: #101010;
  --sm-muted: #8d8984;
  --sm-line: rgba(255, 255, 255, .12);
  --sm-ease: cubic-bezier(.22, 1, .36, 1);
  position: relative;
  overflow: clip;
  color: #f7f5f2;
  background: var(--sm-black);
  font-family: "Poppins", Arial, sans-serif;
}

body:has(.sm4) .onon-inner-page-block { padding: 0 !important; }
body:has(.sm4) .elementor-widget-html > .elementor-widget-container { overflow: visible; }

.sm4 *, .sm4 *::before, .sm4 *::after { box-sizing: border-box; }
.sm4 h1, .sm4 h2, .sm4 h3, .sm4 p, .sm4 ol, .sm4 ul { margin: 0; }
.sm4 img { display: block; max-width: 100%; }
.sm4 button, .sm4 a { font: inherit; }

.sm4-shell {
  width: min(1320px, calc(100% - 64px));
  margin-inline: auto;
}

.sm4-label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .16em;
}

.sm4-label > i {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--sm-red);
  box-shadow: 0 0 0 6px rgba(255, 40, 40, .1);
}

.sm4-hero {
  position: relative;
  min-height: min(920px, 100svh);
  padding: calc(var(--onon-header, 92px) + 54px) 0 40px;
  isolation: isolate;
  border-bottom: 1px solid var(--sm-line);
}

.sm4-hero::before,
.sm4-story__sticky::before,
.sm4-formats::before,
.sm4-measure::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  pointer-events: none;
  background-color: transparent;
  background-size: 80px 80px;
  border-color: rgba(255,255,255,.04);
}

.sm4-hero::after {
  position: absolute;
  top: 0;
  right: 7%;
  bottom: 0;
  z-index: -1;
  width: 1px;
  content: "";
  background: rgba(255,40,40,.2);
  box-shadow: -320px 0 rgba(255,255,255,.035), -640px 0 rgba(255,255,255,.035), -960px 0 rgba(255,255,255,.035);
}

.sm4-hero__grid {
  min-height: calc(min(920px, 100svh) - var(--onon-header, 92px) - 94px);
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(560px, 1.14fr);
  align-items: center;
  gap: clamp(44px, 6vw, 94px);
}

.sm4-hero__copy { max-width: 590px; }
body:not(.onon-home) .onon-inner.sm4 .sm4-hero h1 {
  margin-top: 28px;
  max-width: 560px;
  font-size: clamp(34px, 3.4vw, 50px) !important;
  font-weight: 400;
  line-height: 1.02 !important;
  letter-spacing: -.05em !important;
}

.sm4-hero h1 span, .sm4-hero h1 strong { display: block; }
.sm4-hero h1 strong { margin-top: 9px; color: var(--sm-red); font-weight: 750; }
.sm4-hero__lead { max-width: 540px; margin-top: 25px !important; color: #aaa6a1; font-size: 14px; line-height: 1.75; }

.sm4-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.sm4 .fb-btn {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 5px 6px 5px 20px;
  border: 1px solid #343434;
  border-radius: 15px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 750;
  transition: color .35s var(--sm-ease), background .35s var(--sm-ease), border-color .35s var(--sm-ease), transform .35s var(--sm-ease);
}

.sm4 .fb-btn i {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  transition: transform .35s var(--sm-ease), color .35s var(--sm-ease), background .35s var(--sm-ease);
}

.sm4 .fb-btn--primary { color: #fff; border-color: var(--sm-red); background: var(--sm-red); }
.sm4 .fb-btn--primary i { color: var(--sm-black); background: #fff; }
.sm4 .fb-btn--dark { color: #f6f4f1; background: #0d0d0d; }
.sm4 .fb-btn--dark i { color: #fff; background: #202020; }
.sm4 .fb-btn:hover { transform: translateY(-2px); }
.sm4 .fb-btn:hover i { transform: translateX(3px); }
.sm4 .fb-btn--dark:hover { border-color: #626262; background: #171717; }

.sm4-hero__disciplines {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 0;
  margin-top: 44px !important;
  list-style: none;
  border-top: 1px solid var(--sm-line);
  border-bottom: 1px solid var(--sm-line);
}

.sm4-hero__disciplines li {
  padding: 14px 8px 13px 0;
  color: #77736f;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .13em;
}

.sm4-control {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  border: 1px solid #353535;
  border-radius: 26px;
  background: #0c0c0c;
  box-shadow: 22px 26px 0 #050505;
}

.sm4-control::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  border: 1px solid rgba(255,255,255,.04);
  border-radius: inherit;
}

.sm4-control__head,
.sm4-control__bar,
.sm4-control__foot {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 18px;
  border-bottom: 1px solid #2b2b2b;
  color: #777;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .13em;
}

.sm4-control__head span { color: #d6d2cc; }
.sm4-control__head span i { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--sm-red); }
.sm4-control__head b { color: #73706c; font: inherit; }
.sm4-control__bar { min-height: 33px; justify-content: flex-start; gap: 0; padding: 0; }
.sm4-control__bar span { height: 33px; display: grid; place-items: center; flex: 1; padding: 0 10px; border-right: 1px solid #232323; }

.sm4-feed {
  height: 433px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding: 7px;
  background: #050505;
}

.sm4-slot {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: 16px;
  border: 1px solid #272727;
  background: #141414;
  isolation: isolate;
  transition: border-color .4s ease, opacity .4s ease, transform .4s var(--sm-ease);
}

.sm4-slot.is-active { z-index: 2; border-color: var(--sm-red); transform: translateY(-2px); }
.sm4-slot img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: saturate(.75) brightness(.64); }
.sm4-slot::after { position: absolute; inset: 32% 0 0; z-index: -1; content: ""; background: rgba(4,4,4,.68); }
.sm4-slot > span, .sm4-slot > small { display: block; font-size: 7px; font-weight: 800; letter-spacing: .13em; }
.sm4-slot > span { color: var(--sm-red); }
.sm4-slot > strong { position: absolute; left: 16px; right: 12px; bottom: 35px; font-size: clamp(14px, 1.3vw, 19px); line-height: .98; letter-spacing: -.035em; }
.sm4-slot > small { position: absolute; left: 16px; bottom: 15px; color: rgba(255,255,255,.5); }

.sm4-slot--type { background: var(--sm-red); }
.sm4-slot--type::after, .sm4-slot--metric::after, .sm4-slot--note::after { display: none; }
.sm4-slot--type > span, .sm4-slot--type > small { color: #fff; }
.sm4-slot--type > strong { color: #080808; font-size: clamp(23px, 2.2vw, 33px); font-weight: 900; }
.sm4-slot--metric { background: var(--sm-paper); color: var(--sm-ink); }
.sm4-slot--metric > strong { top: 52px; bottom: auto; font-size: 13px; }
.sm4-slot--metric > strong b { color: var(--sm-red); font-size: 28px; }
.sm4-slot--metric > div { position: absolute; left: 16px; right: 16px; bottom: 36px; height: 76px; display: flex; align-items: flex-end; gap: 8px; }
.sm4-slot--metric > div i { height: var(--h); flex: 1; background: var(--sm-ink); }
.sm4-slot--metric > div i:nth-child(4) { background: var(--sm-red); }
.sm4-slot--metric > small { color: #716d67; }
.sm4-slot--note { color: #fff; background: #1b1b1b; }
.sm4-slot--note > strong { font-size: clamp(15px, 1.4vw, 20px); }

.sm4-control__foot { min-height: 50px; border-top: 1px solid #2b2b2b; border-bottom: 0; }
.sm4-control__foot > span::before { width: 5px; height: 5px; display: inline-block; margin-right: 7px; content: ""; border-radius: 50%; background: #565656; }
.sm4-control__foot > span:nth-child(3)::before { background: #55d994; }
.sm4-control__foot b { color: #fff; font-size: 9px; }
.sm4-control__foot b i { color: var(--sm-red); font-style: normal; }

.sm4-hero__status {
  position: absolute;
  right: 32px;
  bottom: 18px;
  left: 32px;
  display: flex;
  align-items: center;
  gap: 18px;
  color: #5f5c58;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .14em;
}
.sm4-hero__status i { height: 1px; flex: 1; background: #252525; }

.sm4-ticker { overflow: hidden; border-block: 1px solid #272727; background: var(--sm-red); color: #0a0a0a; }
.sm4-ticker__track { width: max-content; display: flex; animation: sm4Ticker var(--sm4-ticker-duration, 24s) linear infinite; will-change: transform; }
.sm4-ticker__set { display: flex; align-items: center; white-space: nowrap; }
.sm4-ticker span { padding: 17px 24px; font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.sm4-ticker i { font-size: 10px; font-style: normal; }
@keyframes sm4Ticker { to { transform: translateX(var(--sm4-ticker-shift, -50%)); } }

.sm4-story { position: relative; height: 185svh; background: #070707; }
.sm4-story__sticky { position: sticky; top: 0; min-height: 100svh; display: grid; align-items: center; overflow: hidden; }
.sm4-story__sticky::after { position: absolute; top: 0; bottom: 0; left: 39%; width: 1px; content: ""; background: #222; }
.sm4-story__layout { min-height: 100svh; display: grid; grid-template-columns: .62fr 1fr; align-items: center; gap: clamp(50px, 8vw, 140px); padding-block: 130px 70px; }
.sm4-story header { position: relative; z-index: 2; }
body:not(.onon-home) .onon-inner.sm4 .sm4-story h2 { max-width: 380px; margin-top: 25px; font-size: clamp(30px, 3vw, 44px) !important; font-weight: 500; line-height: 1.04 !important; letter-spacing: -.045em !important; }
.sm4-story__triggers { display: grid; gap: 18px; padding: 0; margin-top: 54px !important; list-style: none; }
.sm4-story__triggers li { display: flex; align-items: center; gap: 14px; color: #5f5f5f; font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.sm4-story__triggers i { width: 40px; height: 2px; background: #333; transition: width .45s var(--sm-ease), background .45s ease; }
.sm4-story__triggers i.is-active { width: 72px; background: var(--sm-red); }
.sm4-story__stage { position: relative; z-index: 1; min-height: 520px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: 50px 5vw; border: 1px solid #272727; }
.sm4-story__stage::before { position: absolute; inset: 22px; content: ""; pointer-events: none; border: 1px solid #1d1d1d; }
.sm4-story__count { position: absolute; top: 26px; right: 28px; color: var(--sm-red); font-size: 9px; font-weight: 850; letter-spacing: .15em; }
.sm4-story__icon { color: var(--sm-red); font-size: 22px; }
.sm4-story__word { margin-top: 30px; font-size: clamp(58px, 6.2vw, 96px); line-height: .86; letter-spacing: -.065em; }
.sm4-story__stage > p { position: relative; max-width: 470px; margin-top: 32px; color: #999590; font-size: 14px; line-height: 1.8; }
.sm4-story__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 26px; }
.sm4-story__tags span { padding: 8px 10px; border: 1px solid #333; color: #888; font-size: 7px; font-weight: 800; letter-spacing: .12em; }
.sm4-story__signal { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 9px; opacity: .2; }
.sm4-story__signal i { height: 12%; flex: 1; background: var(--sm-red); transform-origin: bottom; animation: sm4Signal 1.4s ease-in-out infinite alternate; }
.sm4-story__signal i:nth-child(2) { height: 48%; animation-delay: -.4s; }
.sm4-story__signal i:nth-child(3) { height: 27%; animation-delay: -.8s; }
.sm4-story__signal i:nth-child(4) { height: 78%; animation-delay: -.2s; }
.sm4-story__signal i:nth-child(5) { height: 42%; animation-delay: -.65s; }
.sm4-story__signal i:nth-child(6) { height: 65%; animation-delay: -.95s; }
.sm4-story__signal i:nth-child(7) { height: 32%; animation-delay: -.3s; }
.sm4-story__stage.is-switching .sm4-story__word,
.sm4-story__stage.is-switching > p { animation: sm4Swap .48s var(--sm-ease); }
@keyframes sm4Signal { to { transform: scaleY(.38); } }
@keyframes sm4Swap { 45% { transform: translateY(12px); opacity: 0; } }

.sm4-system, .sm4-month { padding: 120px 0; color: var(--sm-ink); background: var(--sm-paper); }
.sm4-section-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(270px, .55fr); column-gap: 60px; align-items: end; }
.sm4-section-head .sm4-label { grid-column: 1 / -1; margin-bottom: 25px; }
body:not(.onon-home) .onon-inner.sm4 .sm4-section-head h2 { max-width: 720px; font-size: clamp(32px, 3.6vw, 48px) !important; font-weight: 400; line-height: 1.03 !important; letter-spacing: -.045em !important; }
.sm4-section-head h2 strong { color: var(--sm-red); font-weight: 760; }
.sm4-section-head > p:last-child { max-width: 430px; color: #6e6a65; font-size: 14px; line-height: 1.75; }
.sm4-section-head--dark { color: #f5f2ee; }
.sm4-section-head--dark > p:last-child { color: #928e89; }

.sm4-system__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(370px, .65fr); gap: 42px; margin-top: 76px; }
.sm4-services { border-top: 1px solid #cbc8c2; }
.sm4-services button { width: 100%; min-height: 92px; display: grid; grid-template-columns: 48px minmax(0, 1fr) minmax(140px, .55fr) 36px; align-items: center; gap: 10px; padding: 14px 18px; border: 0; border-bottom: 1px solid #cbc8c2; color: #6a6762; background: transparent; text-align: left; cursor: pointer; transition: color .35s ease, background .35s ease; }
.sm4-services button > span { color: var(--sm-red); font-size: 9px; font-weight: 850; }
.sm4-services button > strong { color: var(--sm-ink); font-size: 20px; letter-spacing: -.025em; }
.sm4-services button > small { color: inherit; font-size: 10px; }
.sm4-services button > i { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #bebbb5; border-radius: 50%; font-size: 10px; }
.sm4-services button.is-active, .sm4-services button:hover { color: #999; background: var(--sm-ink); }
.sm4-services button.is-active > strong, .sm4-services button:hover > strong { color: #fff; }
.sm4-services button.is-active > i { border-color: var(--sm-red); color: var(--sm-red); }

.sm4-preview { position: relative; min-height: 430px; overflow: hidden; padding: 34px; color: #fff; background: var(--sm-ink); transition: color .45s ease, background .45s ease; }
.sm4-preview[data-tone="paper"] { color: var(--sm-ink); background: #e4e0d9; }
.sm4-preview[data-tone="red"] { color: #080808; background: var(--sm-red); }
.sm4-preview__top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; font-size: 8px; font-weight: 850; letter-spacing: .14em; }
.sm4-preview__top i { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; }
.sm4-preview > strong { position: relative; z-index: 2; display: block; margin-top: 80px; font-size: clamp(40px, 4vw, 60px); line-height: .84; letter-spacing: -.065em; }
.sm4-preview > p { position: relative; z-index: 2; max-width: 330px; margin-top: 30px; font-size: 13px; line-height: 1.7; opacity: .68; }
.sm4-preview > small { position: absolute; right: 30px; bottom: 26px; z-index: 2; font-size: 7px; font-weight: 850; letter-spacing: .14em; }
.sm4-preview__orbit { position: absolute; right: -80px; bottom: -100px; width: 290px; aspect-ratio: 1; border: 1px solid currentColor; border-radius: 50%; opacity: .15; }
.sm4-preview__orbit i { position: absolute; inset: 18%; border: 1px solid currentColor; border-radius: 50%; }
.sm4-preview__orbit i:nth-child(2) { inset: 36%; }
.sm4-preview__orbit i:nth-child(3) { inset: 49%; background: currentColor; }
.sm4-preview.is-changing > strong, .sm4-preview.is-changing > p { animation: sm4Swap .42s var(--sm-ease); }

.sm4-formats { position: relative; padding: 120px 0; background: #080808; }
.sm4-formats__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 74px; }
.sm4-format { position: relative; min-height: 510px; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 24px; border: 1px solid #2e2e2e; isolation: isolate; }
.sm4-format::after { position: absolute; inset: 48% 0 0; z-index: -1; content: ""; background: rgba(4,4,4,.82); }
.sm4-format img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: saturate(.72) brightness(.62); transition: transform .9s var(--sm-ease), filter .6s ease; }
.sm4-format:hover img { transform: scale(1.045); filter: saturate(.95) brightness(.72); }
.sm4-format__top { display: flex; align-items: center; justify-content: space-between; color: rgba(255,255,255,.75); font-size: 8px; font-weight: 850; letter-spacing: .12em; }
.sm4-format__top i { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; }
.sm4-format > div:last-child { position: relative; }
.sm4-format small { color: var(--sm-red); font-size: 8px; font-weight: 850; letter-spacing: .13em; }
.sm4-format h3 { max-width: 310px; margin-top: 12px; font-size: clamp(24px, 2.15vw, 32px); line-height: 1.02; letter-spacing: -.04em; }
.sm4-format p { margin-top: 18px; color: #8f8c87; font-size: 11px; }

.sm4-route { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0; margin-top: 76px !important; list-style: none; border-block: 1px solid #c9c6c0; }
.sm4-route li { position: relative; min-height: 260px; padding: 28px 26px; border-right: 1px solid #c9c6c0; }
.sm4-route li:last-child { border-right: 0; }
.sm4-route li > span { color: var(--sm-red); font-size: 9px; font-weight: 850; }
.sm4-route li > i { position: absolute; top: 24px; right: 24px; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #bdb9b3; border-radius: 50%; font-size: 11px; }
.sm4-route h3 { margin-top: 92px; font-size: 19px; }
.sm4-route p { max-width: 240px; margin-top: 12px; color: #716d67; font-size: 11px; line-height: 1.7; }
.sm4-route li::after { position: absolute; right: -4px; top: 50%; z-index: 2; width: 7px; height: 7px; content: ""; border-radius: 50%; background: var(--sm-red); }
.sm4-route li:last-child::after { display: none; }

.sm4-delivery { margin-top: 64px; border: 1px solid #c9c6c0; }
.sm4-delivery > p { padding: 16px 18px; border-bottom: 1px solid #c9c6c0; font-size: 8px; font-weight: 850; letter-spacing: .14em; }
.sm4-delivery > div { display: grid; grid-template-columns: repeat(4, 1fr); }
.sm4-delivery span { min-height: 84px; display: flex; align-items: center; gap: 12px; padding: 18px; border-right: 1px solid #d3d0ca; border-bottom: 1px solid #d3d0ca; font-size: 10px; font-weight: 650; }
.sm4-delivery span:nth-child(4n) { border-right: 0; }
.sm4-delivery span:nth-child(n+5) { border-bottom: 0; }
.sm4-delivery i { color: var(--sm-red); font-size: 13px; }

.sm4-measure { position: relative; padding: 120px 0; background: #080808; }
.sm4-measure__grid { display: grid; grid-template-columns: minmax(0, .78fr) minmax(570px, 1.12fr); align-items: center; gap: 80px; }
.sm4-measure .sm4-section-head { display: block; }
.sm4-measure .sm4-section-head h2 { margin-top: 25px; }
.sm4-measure .sm4-section-head > p:last-child { margin-top: 28px; }
.sm4-report { min-height: 520px; border: 1px solid #343434; background: #0e0e0e; }
.sm4-report header, .sm4-report footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 50px; padding: 0 22px; border-bottom: 1px solid #303030; color: #7c7874; font-size: 8px; font-weight: 850; letter-spacing: .13em; }
.sm4-report header b { color: #5dd79b; font: inherit; }
.sm4-report__total { padding: 35px 28px 10px; }
.sm4-report__total small { display: block; color: #777; font-size: 8px; font-weight: 850; letter-spacing: .13em; }
.sm4-report__total strong { display: block; margin-top: 8px; font-size: 56px; line-height: 1; letter-spacing: -.06em; }
.sm4-report__total i { color: #5dd79b; font-size: 12px; font-style: normal; letter-spacing: 0; }
.sm4-report__chart { height: 235px; display: flex; align-items: flex-end; gap: 8px; padding: 28px 28px 0; border-bottom: 1px solid #303030; }
.sm4-report__chart > i { position: relative; height: var(--v); flex: 1; background: #2a2a2a; transform-origin: bottom; transition: height .8s var(--sm-ease); }
.sm4-report__chart > i:nth-child(2), .sm4-report__chart > i:nth-child(5) { background: var(--sm-red); }
.sm4-report__chart span { position: absolute; right: 50%; bottom: -22px; transform: translateX(50%); color: #777; font-size: 6px; font-style: normal; font-weight: 800; letter-spacing: .08em; white-space: nowrap; }
.sm4-report footer { min-height: 94px; align-items: flex-start; padding-block: 20px; border: 0; }
.sm4-report footer span { flex: 0 0 auto; }
.sm4-report footer span i { width: 6px; height: 6px; display: inline-block; margin-right: 7px; border-radius: 50%; background: var(--sm-red); }
.sm4-report footer p { max-width: 420px; color: #999590; font-size: 10px; line-height: 1.6; letter-spacing: 0; }

.sm4-faq { padding: 120px 0; color: var(--sm-ink); background: var(--sm-paper); }
.sm4-faq__grid { display: grid; grid-template-columns: minmax(290px, .65fr) minmax(0, 1.2fr); gap: 90px; }
body:not(.onon-home) .onon-inner.sm4 .sm4-faq h2 { margin-top: 26px; font-size: clamp(32px, 3.6vw, 48px) !important; font-weight: 400; line-height: 1.03 !important; letter-spacing: -.045em !important; }
.sm4-faq h2 strong { color: var(--sm-red); font-weight: 760; }
.sm4-faq__list { border-top: 1px solid #c8c5bf; }
.sm4-faq details { border-bottom: 1px solid #c8c5bf; }
.sm4-faq summary { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer; list-style: none; font-size: 15px; font-weight: 700; }
.sm4-faq summary::-webkit-details-marker { display: none; }
.sm4-faq summary i { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #bdbab5; border-radius: 50%; color: var(--sm-red); font-size: 10px; transition: transform .35s ease; }
.sm4-faq details[open] summary i { transform: rotate(45deg); }
.sm4-faq details p { max-width: 710px; padding: 0 52px 25px 0; color: #6e6a65; font-size: 12px; line-height: 1.8; }

.sm4-final { padding: 105px 0; background: var(--sm-red); color: #080808; }
body:not(.onon-home) .onon-inner.sm4 .sm4-final h2 { max-width: 720px; margin-top: 26px; font-size: clamp(34px, 4vw, 54px) !important; font-weight: 400; line-height: 1.02 !important; letter-spacing: -.048em !important; }
.sm4-final h2 strong { font-weight: 850; }
.sm4-final > .sm4-shell > p:not(.sm4-label) { max-width: 560px; margin-top: 27px; font-size: 13px; line-height: 1.7; }
.sm4-final .fb-btn { margin-top: 32px; color: #fff; border-color: #080808; background: #080808; }
.sm4-final .fb-btn i { color: #080808; background: #fff; }

@media (max-width: 1100px) {
  .sm4-hero { min-height: auto; }
  .sm4-hero__grid { min-height: 0; grid-template-columns: 1fr; padding-bottom: 60px; }
  .sm4-hero__copy { max-width: 760px; }
  .sm4-control { max-width: 820px; width: 100%; }
  .sm4-hero__status { display: none; }
  .sm4-section-head { grid-template-columns: 1fr; }
  .sm4-section-head > p:last-child { margin-top: 25px; }
  .sm4-system__grid { grid-template-columns: minmax(0, 1fr) minmax(330px, .65fr); gap: 20px; }
  .sm4-formats__grid { grid-template-columns: repeat(2, 1fr); }
  .sm4-format:last-child { grid-column: 1 / -1; min-height: 420px; }
  .sm4-route { grid-template-columns: repeat(2, 1fr); }
  .sm4-route li:nth-child(2) { border-right: 0; }
  .sm4-route li:nth-child(-n+2) { border-bottom: 1px solid #c9c6c0; }
  .sm4-route li:nth-child(2)::after { display: none; }
  .sm4-delivery > div { grid-template-columns: repeat(2, 1fr); }
  .sm4-delivery span:nth-child(2n) { border-right: 0; }
  .sm4-delivery span:nth-child(-n+6) { border-bottom: 1px solid #d3d0ca; }
  .sm4-delivery span:nth-child(n+7) { border-bottom: 0; }
  .sm4-measure__grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .sm4-shell { width: min(100% - 32px, 620px); }
  .sm4-hero { padding: calc(var(--onon-header, 78px) + 38px) 0 28px; }
  .sm4-hero__grid { gap: 46px; padding-bottom: 28px; }
  body:not(.onon-home) .onon-inner.sm4 .sm4-hero h1 { margin-top: 22px; max-width: 320px; font-size: clamp(29px, 9vw, 36px) !important; line-height: 1.04 !important; letter-spacing: -.042em !important; }
  .sm4-hero__lead { margin-top: 22px !important; max-width: 330px; font-size: 12px; line-height: 1.7; }
  .sm4-actions { display: grid; }
  .sm4 .fb-btn { width: 100%; justify-content: space-between; }
  .sm4-hero__disciplines { margin-top: 32px !important; grid-template-columns: repeat(2, 1fr); }
  .sm4-hero__disciplines li:nth-child(2n) { text-align: right; }
  .sm4-control { min-height: 554px; border-radius: 18px; box-shadow: 9px 11px 0 #050505; }
  .sm4-control__head { min-height: 42px; }
  .sm4-control__head b, .sm4-control__bar span:nth-child(3), .sm4-control__bar span:nth-child(4) { display: none; }
  .sm4-feed { height: 430px; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); gap: 5px; padding: 5px; }
  .sm4-slot { padding: 11px; }
  .sm4-slot > strong { left: 11px; bottom: 29px; font-size: 12px; }
  .sm4-slot > small { left: 11px; bottom: 10px; font-size: 5px; }
  .sm4-slot--type > strong { font-size: 19px; }
  .sm4-slot--metric > strong { top: 37px; }
  .sm4-slot--metric > strong b { font-size: 20px; }
  .sm4-slot--metric > div { left: 11px; right: 11px; bottom: 28px; height: 44px; gap: 4px; }
  .sm4-slot--note > strong { font-size: 12px; }
  .sm4-control__foot { min-height: 44px; padding: 0 12px; }
  .sm4-control__foot > span:nth-child(2) { display: none; }
  .sm4-ticker span { padding: 14px 18px; font-size: 9px; }
  .sm4-story { height: 175svh; }
  .sm4-story__sticky { align-items: stretch; }
  .sm4-story__sticky::after { display: none; }
  .sm4-story__layout { min-height: 100svh; grid-template-columns: 1fr; align-content: center; gap: 32px; padding-block: 108px 36px; }
  body:not(.onon-home) .onon-inner.sm4 .sm4-story h2 { margin-top: 18px; max-width: 280px; font-size: 27px !important; }
  .sm4-story__triggers { display: flex; margin-top: 24px !important; gap: 16px; }
  .sm4-story__triggers li { gap: 6px; font-size: 7px; }
  .sm4-story__triggers i { width: 18px; }
  .sm4-story__triggers i.is-active { width: 28px; }
  .sm4-story__stage { min-height: 380px; padding: 40px 27px; }
  .sm4-story__word { margin-top: 23px; font-size: clamp(44px, 14.5vw, 58px); }
  .sm4-story__stage > p { margin-top: 22px; font-size: 12px; line-height: 1.65; }
  .sm4-story__tags { margin-top: 18px; }
  .sm4-system, .sm4-formats, .sm4-month, .sm4-measure, .sm4-faq { padding: 82px 0; }
  body:not(.onon-home) .onon-inner.sm4 .sm4-section-head h2 { max-width: 310px; font-size: 29px !important; }
  .sm4-section-head > p:last-child { font-size: 12px; }
  .sm4-system__grid { grid-template-columns: 1fr; margin-top: 48px; }
  .sm4-services button { min-height: 82px; grid-template-columns: 34px minmax(0, 1fr) 32px; }
  .sm4-services button > small { display: none; }
  .sm4-services button > strong { font-size: 17px; }
  .sm4-preview { min-height: 340px; padding: 26px; }
  .sm4-preview > strong { margin-top: 66px; font-size: 36px; }
  .sm4-preview > p { margin-top: 22px; font-size: 11px; }
  .sm4-formats__grid { grid-template-columns: 1fr; margin-top: 48px; }
  .sm4-format, .sm4-format:last-child { grid-column: auto; min-height: 410px; }
  .sm4-route { grid-template-columns: 1fr; margin-top: 48px !important; }
  .sm4-route li, .sm4-route li:nth-child(2) { min-height: 190px; border-right: 0; border-bottom: 1px solid #c9c6c0; }
  .sm4-route li:last-child { border-bottom: 0; }
  .sm4-route li::after { top: auto; right: 50%; bottom: -4px; display: block !important; }
  .sm4-route li:last-child::after { display: none !important; }
  .sm4-route h3 { margin-top: 58px; }
  .sm4-delivery { margin-top: 44px; }
  .sm4-delivery > div { grid-template-columns: 1fr; }
  .sm4-delivery span, .sm4-delivery span:nth-child(n) { min-height: 64px; border-right: 0; border-bottom: 1px solid #d3d0ca; }
  .sm4-delivery span:last-child { border-bottom: 0; }
  .sm4-measure__grid { gap: 46px; }
  .sm4-report { min-height: 450px; }
  .sm4-report__total strong { font-size: 44px; }
  .sm4-report__chart { height: 195px; padding-inline: 14px; gap: 5px; }
  .sm4-report__chart span { font-size: 5px; letter-spacing: 0; }
  .sm4-report footer { display: block; }
  .sm4-report footer p { margin-top: 10px; }
  .sm4-faq__grid { grid-template-columns: 1fr; gap: 46px; }
  body:not(.onon-home) .onon-inner.sm4 .sm4-faq h2 { font-size: 29px !important; }
  .sm4-faq summary { min-height: 68px; font-size: 13px; }
  .sm4-final { padding: 78px 0; }
  body:not(.onon-home) .onon-inner.sm4 .sm4-final h2 { max-width: 310px; font-size: 32px !important; }
}

/* v5 refinement: realistic social operations UI and a quieter type scale. */
body:not(.onon-home) .onon-inner.sm4 .sm4-hero h1 {
  max-width: 500px;
  font-size: clamp(30px, 2.8vw, 40px) !important;
  line-height: 1.06 !important;
  letter-spacing: -.042em !important;
}

.sm4-hero__lead { max-width: 500px; font-size: 13px; line-height: 1.72; }
.sm4-hero__grid { grid-template-columns: minmax(0, .76fr) minmax(590px, 1.24fr); gap: clamp(38px, 5vw, 76px); }
.sm4-control { min-height: 575px; border-radius: 18px; box-shadow: 16px 18px 0 #050505; }
.sm4-control__head { min-height: 38px; padding-inline: 14px; }
.sm4-control__head b { display: flex; align-items: center; gap: 6px; color: #85817c; }
.sm4-control__head b i { width: 5px; height: 5px; border-radius: 50%; background: #55d994; }
.sm4-control__account { min-height: 58px; display: flex; align-items: center; gap: 11px; padding: 8px 14px; border-bottom: 1px solid #292929; }
.sm4-control__avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: var(--sm-red); font-size: 12px; font-weight: 900; letter-spacing: -.05em; }
.sm4-control__account > div { display: grid; gap: 2px; }
.sm4-control__account strong { color: #eeeae5; font-size: 10px; }
.sm4-control__account small { color: #716e69; font-size: 7px; }
.sm4-control__account nav { display: flex; align-items: center; gap: 5px; margin-left: auto; }
.sm4-control__account button { min-width: 48px; height: 26px; border: 1px solid #303030; border-radius: 7px; color: #77736f; background: #111; font-size: 7px; font-weight: 800; cursor: default; }
.sm4-control__account button.is-active { color: #fff; border-color: #444; background: #272727; }
.sm4-control__account nav > i { width: 27px; height: 27px; display: grid; place-items: center; margin-left: 4px; border: 1px solid #343434; border-radius: 7px; color: #aaa6a1; font-size: 11px; }
.sm4-control__summary { min-height: 58px; display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); border-bottom: 1px solid #292929; }
.sm4-control__summary > span { display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 8px 14px; border-right: 1px solid #242424; }
.sm4-control__summary > span:last-child { border-right: 0; }
.sm4-control__summary small { color: #696661; font-size: 6px; font-weight: 850; letter-spacing: .12em; }
.sm4-control__summary strong { color: #d7d3cd; font-size: 10px; }
.sm4-control__summary strong.is-ok { color: #5dd79b; font-size: 8px; }
.sm4-control__summary strong.is-ok i { margin-right: 4px; }
.sm4-control__bar { min-height: 29px; }
.sm4-control__bar span { height: 29px; font-size: 6px; }
.sm4-feed { height: 338px; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 6px; }
.sm4-slot { padding: 12px; }
.sm4-slot > span { font-size: 6px; }
.sm4-slot > strong { left: 12px; right: 12px; bottom: 34px; overflow: hidden; color: #fff; font-size: clamp(11px, .92vw, 14px); line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.sm4-slot > small { left: 12px; bottom: 13px; color: rgba(255,255,255,.62); font-size: 6px; }
.sm4-slot > em { position: absolute; right: 10px; bottom: 10px; padding: 4px 6px; border: 1px solid rgba(255,255,255,.22); border-radius: 7px; color: rgba(255,255,255,.78); background: rgba(8,8,8,.6); font-size: 5px; font-style: normal; font-weight: 800; letter-spacing: .08em; }
.sm4-slot::after { inset: 50% 0 0; background: rgba(4,4,4,.76); }
.sm4-slot--type { color: #070707; }
.sm4-slot--type > strong { top: 56px; bottom: auto; max-width: 150px; color: #080808; font-size: clamp(18px, 1.7vw, 25px); line-height: .94; white-space: normal; }
.sm4-slot--type > small, .sm4-slot--type > span { color: #0b0b0b; }
.sm4-slot--type > em { color: #080808; border-color: rgba(0,0,0,.25); background: rgba(255,255,255,.3); }
.sm4-slot--metric > strong { top: 46px; bottom: auto; color: var(--sm-ink); white-space: normal; }
.sm4-slot--metric > strong b { display: block; font-size: 25px; }
.sm4-slot--metric > strong small { display: block; margin-top: 2px; color: #716d67; font-size: 7px; font-weight: 700; }
.sm4-slot--metric > div { bottom: 35px; height: 55px; }
.sm4-slot--metric > em { color: #68645f; border-color: #c8c4bd; background: transparent; }
.sm4-slot--note > strong { top: 60px; bottom: auto; max-width: 160px; font-size: 18px; line-height: 1; white-space: normal; }
.sm4-control__foot { min-height: 42px; padding-inline: 14px; }
.sm4-control__foot > span { font-size: 6px; }
.sm4-control__foot > span:first-child { color: #8f8b86; }
.sm4-control__foot > span:first-child i { width: 5px; height: 5px; display: inline-block; margin-right: 6px; border-radius: 50%; background: #55d994; }

body:not(.onon-home) .onon-inner.sm4 .sm4-story h2 { max-width: 340px; font-size: clamp(28px, 2.45vw, 36px) !important; }
.sm4-story__layout { grid-template-columns: .52fr 1.08fr; gap: clamp(45px, 6vw, 95px); }
.sm4-story__stage { min-height: 475px; display: block; padding: 0; border-color: #303030; background: #0b0b0b; }
.sm4-story__stage::before { display: none; }
.sm4-story__stage-head { height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; border-bottom: 1px solid #292929; color: #77736f; font-size: 7px; font-weight: 850; letter-spacing: .13em; }
.sm4-story__stage-head span { display: flex; align-items: center; gap: 8px; }
.sm4-story__stage-head span i { width: 6px; height: 6px; border-radius: 50%; background: var(--sm-red); }
.sm4-story__stage-head b { color: var(--sm-red); font: inherit; }
.sm4-story__content { min-height: 425px; display: grid; grid-template-columns: .83fr 1.17fr; }
.sm4-story__copy { display: flex; flex-direction: column; justify-content: center; padding: 34px; border-right: 1px solid #292929; }
.sm4-story__word { margin-top: 22px; font-size: clamp(36px, 3.7vw, 54px); line-height: .9; letter-spacing: -.055em; }
.sm4-story__copy > p { max-width: 310px; margin-top: 24px; color: #9a9691; font-size: 11px; line-height: 1.72; }
.sm4-story__copy .sm4-story__tags { margin-top: 22px; }
.sm4-story__data { position: relative; min-width: 0; display: flex; flex-direction: column; padding: 25px 25px 0; overflow: hidden; }
.sm4-story__data header { display: flex; justify-content: space-between; color: #6f6c67; font-size: 7px; font-weight: 850; letter-spacing: .11em; }
.sm4-story__data header b { color: #5dd79b; font: inherit; }
.sm4-story__data > strong { display: block; margin-top: 26px; color: #f3f0eb; font-size: clamp(21px, 2vw, 29px); line-height: 1.05; letter-spacing: -.04em; }
.sm4-story__mini { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 22px; border: 1px solid #2c2c2c; }
.sm4-story__mini span { display: grid; gap: 6px; padding: 12px; border-right: 1px solid #2c2c2c; }
.sm4-story__mini span:last-child { border-right: 0; }
.sm4-story__mini small { color: #66625e; font-size: 6px; font-weight: 850; letter-spacing: .12em; }
.sm4-story__mini b { color: #d2cec8; font-size: 9px; }
.sm4-story__data .sm4-story__signal { position: relative; inset: auto; height: 145px; margin-top: auto; display: flex; align-items: flex-end; gap: 5px; opacity: .72; }
.sm4-story__data .sm4-story__signal i { min-width: 0; background: #3c1515; }
.sm4-story__data .sm4-story__signal i:nth-child(4), .sm4-story__data .sm4-story__signal i:nth-child(6) { background: var(--sm-red); }
.sm4-story__data footer { height: 34px; display: flex; align-items: center; border-top: 1px solid #292929; color: #66625e; font-size: 6px; font-weight: 850; letter-spacing: .12em; }

body:not(.onon-home) .onon-inner.sm4 .sm4-section-head h2 { max-width: 650px; font-size: clamp(29px, 3vw, 42px) !important; }
.sm4-formats__grid { height: 610px; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sm4-format { min-height: 0; padding: 20px; }
.sm4-format.is-reels { grid-row: 1 / 3; }
.sm4-format.is-carousel { grid-column: 2; grid-row: 1; }
.sm4-format.is-story { grid-column: 2; grid-row: 2; }
.sm4-format.is-carousel img, .sm4-format.is-story img { left: 48%; width: 52%; object-position: center 35%; }
.sm4-format.is-carousel::after, .sm4-format.is-story::after { inset: 0 42% 0 0; background: rgba(5,5,5,.94); }
.sm4-format.is-reels::after { inset: 44% 0 0; background: rgba(4,4,4,.82); }
.sm4-format__copy { position: relative; z-index: 1; }
.sm4-format.is-carousel .sm4-format__copy, .sm4-format.is-story .sm4-format__copy { max-width: 49%; }
.sm4-format h3 { max-width: 285px; font-size: clamp(20px, 1.75vw, 26px); line-height: 1.04; }
.sm4-format p { margin-top: 12px; font-size: 9px; line-height: 1.6; }
.sm4-format__copy ul { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 17px 0 0; list-style: none; }
.sm4-format__copy li { padding: 6px 8px; border: 1px solid rgba(255,255,255,.22); color: #a7a39e; font-size: 6px; font-weight: 800; letter-spacing: .08em; }

.sm4-measure__grid { grid-template-columns: minmax(0, .58fr) minmax(610px, 1.22fr); gap: 65px; }
.sm4-measure .sm4-section-head h2 { max-width: 460px; }
.sm4-report { min-height: 545px; }
.sm4-report > header { min-height: 44px; }
.sm4-report > header span { display: flex; align-items: center; gap: 8px; color: #b5b1ab; }
.sm4-report > header span i { color: var(--sm-red); font-size: 11px; }
.sm4-report > header b i { margin-left: 7px; font-size: 7px; }
.sm4-report__kpis { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid #303030; }
.sm4-report__kpis article { position: relative; min-width: 0; padding: 18px 16px; border-right: 1px solid #303030; }
.sm4-report__kpis article:last-child { border-right: 0; }
.sm4-report__kpis small { display: block; color: #6f6b66; font-size: 6px; font-weight: 850; letter-spacing: .12em; }
.sm4-report__kpis strong { display: block; margin-top: 8px; color: #f4f1ec; font-size: clamp(18px, 1.8vw, 27px); line-height: 1; letter-spacing: -.045em; }
.sm4-report__kpis em { position: absolute; top: 18px; right: 13px; color: #5dd79b; font-size: 7px; font-style: normal; font-weight: 850; }
.sm4-report__trend { padding: 22px 22px 12px; border-bottom: 1px solid #303030; }
.sm4-report__trend > div:first-child { display: flex; align-items: flex-start; justify-content: space-between; }
.sm4-report__trend > div:first-child span { color: #77736f; font-size: 7px; font-weight: 850; letter-spacing: .12em; }
.sm4-report__trend > div:first-child b { color: #eeeae5; font-size: 19px; line-height: 1; }
.sm4-report__trend > div:first-child i { margin-left: 5px; color: #5dd79b; font-size: 8px; font-style: normal; }
.sm4-report__trend svg { width: 100%; height: 210px; display: block; margin-top: 5px; overflow: visible; }
.sm4-report__gridlines line { stroke: #292929; stroke-width: 1; }
.sm4-report__area { fill: rgba(255,40,40,.1); stroke: none; }
.sm4-report__line { fill: none; stroke: var(--sm-red); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sm4-report__points circle { fill: #0e0e0e; stroke: var(--sm-red); stroke-width: 3; }
.sm4-report__dates { display: flex; justify-content: space-between; color: #66625e; font-size: 6px; font-weight: 750; }
.sm4-report > footer { min-height: 72px; align-items: center; padding-block: 14px; }
.sm4-report > footer p { max-width: 470px; font-size: 9px; }

body:not(.onon-home) .onon-inner.sm4 .sm4-faq h2 { font-size: clamp(28px, 3vw, 42px) !important; }
body:not(.onon-home) .onon-inner.sm4 .sm4-final h2 { max-width: 640px; font-size: clamp(30px, 3.4vw, 46px) !important; }
.sm4-route h3 { font-size: 17px; }
.sm4-services button > strong { font-size: 18px; }
.sm4-preview > strong { font-size: clamp(34px, 3.2vw, 48px); }

@media (max-width: 1100px) {
  .sm4-hero__grid { grid-template-columns: 1fr; }
  .sm4-control { max-width: 850px; }
  .sm4-story__layout { grid-template-columns: .58fr 1fr; gap: 35px; }
  .sm4-measure__grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  body:not(.onon-home) .onon-inner.sm4 .sm4-hero h1 { max-width: 290px; font-size: clamp(25px, 7.5vw, 29px) !important; line-height: 1.08 !important; }
  .sm4-hero__lead { max-width: 310px; font-size: 11px; }
  .sm4-control { min-height: 606px; }
  .sm4-control__account { min-height: 54px; }
  .sm4-control__account nav button { display: none; }
  .sm4-control__summary { grid-template-columns: repeat(2, 1fr); }
  .sm4-control__summary > span { min-height: 50px; }
  .sm4-control__summary > span:nth-child(2) { border-right: 0; }
  .sm4-control__summary > span:nth-child(-n+2) { border-bottom: 1px solid #242424; }
  .sm4-control__bar span:nth-child(n) { display: grid; }
  .sm4-control__bar span:nth-child(n+5) { display: none; }
  .sm4-feed { height: 338px; }
  .sm4-slot > strong { font-size: 10px; }
  .sm4-slot--type > strong { top: 43px; font-size: 16px; }
  .sm4-slot--metric > strong { top: 39px; }
  .sm4-slot--metric > strong b { font-size: 18px; }
  .sm4-slot--metric > div { height: 39px; }
  .sm4-slot--note > strong { top: 48px; font-size: 13px; }
  .sm4-slot > em { right: 7px; bottom: 7px; padding: 3px 4px; font-size: 4px; }
  .sm4-control__foot > span:nth-child(2) { display: none; }
  body:not(.onon-home) .onon-inner.sm4 .sm4-story h2 { max-width: 260px; font-size: 25px !important; }
  .sm4-story__layout { grid-template-columns: 1fr; }
  .sm4-story__stage { min-height: 520px; }
  .sm4-story__content { min-height: 472px; grid-template-columns: 1fr; }
  .sm4-story__copy { padding: 25px; border-right: 0; border-bottom: 1px solid #292929; }
  .sm4-story__word { font-size: 35px; }
  .sm4-story__copy > p { margin-top: 17px; font-size: 10px; }
  .sm4-story__copy .sm4-story__tags { margin-top: 16px; }
  .sm4-story__data { min-height: 220px; padding: 20px 22px 0; }
  .sm4-story__data > strong { margin-top: 15px; font-size: 20px; }
  .sm4-story__mini { margin-top: 15px; }
  .sm4-story__data .sm4-story__signal { position: absolute; right: 22px; bottom: 34px; left: 22px; z-index: 0; height: 62px; opacity: .35; }
  .sm4-story__data footer { position: relative; z-index: 1; margin-top: auto; }
  body:not(.onon-home) .onon-inner.sm4 .sm4-section-head h2 { max-width: 290px; font-size: 26px !important; }
  .sm4-formats__grid { height: auto; grid-template-columns: 1fr; grid-template-rows: auto; }
  .sm4-format.is-reels, .sm4-format.is-carousel, .sm4-format.is-story { grid-column: auto; grid-row: auto; min-height: 340px; }
  .sm4-format.is-carousel img, .sm4-format.is-story img { inset: 0; width: 100%; object-position: center 30%; }
  .sm4-format.is-carousel::after, .sm4-format.is-story::after, .sm4-format.is-reels::after { inset: 43% 0 0; background: rgba(4,4,4,.84); }
  .sm4-format.is-carousel .sm4-format__copy, .sm4-format.is-story .sm4-format__copy { max-width: 100%; }
  .sm4-format h3 { font-size: 21px; }
  .sm4-report__kpis { grid-template-columns: repeat(2, 1fr); }
  .sm4-report__kpis article:nth-child(2) { border-right: 0; }
  .sm4-report__kpis article:nth-child(-n+2) { border-bottom: 1px solid #303030; }
  .sm4-report__kpis strong { font-size: 22px; }
  .sm4-report__trend { padding-inline: 14px; }
  .sm4-report__trend svg { height: 155px; }
  .sm4-report > footer { min-height: 94px; }
  body:not(.onon-home) .onon-inner.sm4 .sm4-faq h2 { font-size: 26px !important; }
  body:not(.onon-home) .onon-inner.sm4 .sm4-final h2 { max-width: 290px; font-size: 28px !important; }
}

/* v6 — social product workspace */
.sm4-workspace { margin-top: 64px; overflow: hidden; border: 1px solid #292929; border-radius: 24px; background: #0d0d0d; box-shadow: 0 28px 70px rgba(20,16,12,.13); }
.sm4-workspace__bar { min-height: 64px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 0 18px; border-bottom: 1px solid #292929; color: #f5f2ed; }
.sm4-workspace__brand { display: flex; align-items: center; min-width: 0; }
.sm4-workspace__brand > i { width: 7px; height: 7px; flex: 0 0 auto; margin-right: 10px; border-radius: 50%; background: var(--sm-red); box-shadow: 0 0 0 5px rgba(255,40,40,.11); }
.sm4-workspace__brand strong { font-size: 10px; letter-spacing: -.01em; }
.sm4-workspace__brand span { margin-left: 14px; padding-left: 14px; border-left: 1px solid #313131; color: #68645f; font-size: 7px; font-weight: 750; letter-spacing: .08em; }
.sm4-workspace__bar nav { display: flex; align-items: center; gap: 3px; padding: 4px; border: 1px solid #2c2c2c; border-radius: 10px; background: #151515; }
.sm4-workspace__bar nav button { min-width: 68px; height: 30px; padding: 0 12px; border: 0; border-radius: 7px; color: #77736f; background: transparent; font-size: 8px; font-weight: 750; cursor: pointer; }
.sm4-workspace__bar nav button.is-active { color: #f4f1ed; background: #292929; box-shadow: 0 1px 0 rgba(255,255,255,.04) inset; }
.sm4-workspace__team { display: flex; align-items: center; justify-content: flex-end; gap: 15px; }
.sm4-workspace__team > div { display: flex; }
.sm4-workspace__team > div i { width: 24px; height: 24px; display: grid; place-items: center; margin-left: -5px; border: 2px solid #0d0d0d; border-radius: 50%; color: #fff; background: #34312f; font-size: 6px; font-style: normal; font-weight: 850; }
.sm4-workspace__team > div i:first-child { margin-left: 0; background: var(--sm-red); }
.sm4-workspace__team > span { display: flex; align-items: center; gap: 6px; color: #77736f; font-size: 7px; font-weight: 750; }
.sm4-workspace__team > span b { width: 5px; height: 5px; border-radius: 50%; background: #53d69a; }
.sm4-workspace__team > button { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #303030; border-radius: 9px; color: #8a8681; background: #171717; font-size: 9px; }

.sm4-workspace__body { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 590px; }
.sm4-workspace__rail { display: flex; flex-direction: column; min-width: 0; padding: 22px 14px 16px; border-right: 1px solid #292929; color: #fff; background: #101010; }
.sm4-workspace__rail-head { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 14px; color: #5f5b57; font-size: 6px; font-weight: 850; letter-spacing: .13em; }
.sm4-workspace__rail-head > i { color: #77726d; font-size: 8px; }
.sm4-workspace .sm4-services { display: grid; gap: 5px; border: 0; }
.sm4-workspace .sm4-services button { min-height: 66px; grid-template-columns: 34px minmax(0, 1fr) auto 12px; gap: 8px; padding: 9px 10px; border: 1px solid transparent; border-radius: 12px; color: #76716c; background: transparent; }
.sm4-workspace .sm4-services button > span { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #2d2d2d; border-radius: 9px; color: #77726e; background: #171717; font-size: 9px; }
.sm4-workspace .sm4-services button > strong { overflow: hidden; color: #aaa6a0; font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.sm4-workspace .sm4-services button > small { padding: 5px 6px; border-radius: 6px; color: #66615d; background: #191919; font-size: 5px; font-weight: 800; letter-spacing: .04em; white-space: nowrap; }
.sm4-workspace .sm4-services button > i { width: auto; height: auto; border: 0; color: #484542; font-size: 7px; }
.sm4-workspace .sm4-services button.is-active,
.sm4-workspace .sm4-services button:hover { border-color: #333; color: #fff; background: #1d1d1d; box-shadow: 0 10px 26px rgba(0,0,0,.22); }
.sm4-workspace .sm4-services button.is-active > span { border-color: rgba(255,40,40,.5); color: var(--sm-red); background: rgba(255,40,40,.08); }
.sm4-workspace .sm4-services button.is-active > strong,
.sm4-workspace .sm4-services button:hover > strong { color: #fff; }
.sm4-workspace .sm4-services button.is-active > i { color: var(--sm-red); }
.sm4-workspace__health { display: flex; flex-direction: column; gap: 6px; padding: 15px 9px 4px; margin-top: auto; border-top: 1px solid #252525; }
.sm4-workspace__health span { display: flex; align-items: center; gap: 7px; color: #aaa5a0; font-size: 7px; font-weight: 750; }
.sm4-workspace__health span i { width: 5px; height: 5px; border-radius: 50%; background: #53d69a; box-shadow: 0 0 0 4px rgba(83,214,154,.08); }
.sm4-workspace__health small { color: #55514d; font-size: 6px; }

.sm4-workspace .sm4-preview { --sm4-ui-accent: var(--sm-red); min-height: 0; overflow: hidden; padding: 0; color: #111; background: #f5f3ef; transition: none; }
.sm4-workspace .sm4-preview[data-tone="paper"] { --sm4-ui-accent: #111; color: #111; background: #f5f3ef; }
.sm4-workspace .sm4-preview[data-tone="red"] { --sm4-ui-accent: var(--sm-red); color: #111; background: #f5f3ef; }
.sm4-workspace .sm4-preview__top { min-height: 47px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; border-bottom: 1px solid #d9d5cf; color: #76716b; font-size: 6px; font-weight: 850; letter-spacing: .1em; }
.sm4-workspace .sm4-preview__top span { display: flex; align-items: center; gap: 9px; }
.sm4-workspace .sm4-preview__top span > i { width: 25px; height: 25px; display: grid; place-items: center; border: 0; border-radius: 7px; color: #fff; background: var(--sm4-ui-accent); font-size: 8px; }
.sm4-workspace .sm4-preview__top b { color: #282522; font: inherit; }
.sm4-workspace .sm4-preview__top small { color: #8c8781; font: inherit; }
.sm4-preview__intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px; align-items: center; padding: 22px; }
.sm4-preview__intro > div > span { display: inline-flex; align-items: center; min-height: 20px; padding: 0 8px; border-radius: 6px; color: var(--sm4-ui-accent); background: rgba(255,40,40,.08); font-size: 6px; font-weight: 850; letter-spacing: .11em; }
.sm4-preview[data-tone="paper"] .sm4-preview__intro > div > span { color: #111; background: #e1ddd7; }
.sm4-workspace .sm4-preview__intro strong { display: block; margin-top: 9px; font-size: clamp(20px, 2.1vw, 30px); line-height: 1; letter-spacing: -.045em; }
.sm4-workspace .sm4-preview__intro p { max-width: 540px; margin-top: 9px; color: #77716b; font-size: 9px; line-height: 1.55; }
.sm4-preview__intro figure { --p: 78; position: relative; width: 66px; height: 66px; display: grid; place-items: center; margin: 0; border-radius: 50%; background: conic-gradient(var(--sm4-ui-accent) calc(var(--p) * 1%), #dedad4 0); }
.sm4-preview__intro figure::before { position: absolute; inset: 6px; content: ""; border-radius: 50%; background: #f5f3ef; }
.sm4-preview__intro figure b, .sm4-preview__intro figure small { position: relative; z-index: 1; }
.sm4-preview__intro figure b { margin-top: 5px; font-size: 16px; letter-spacing: -.04em; }
.sm4-preview__intro figure small { margin-top: -14px; color: #827d77; font-size: 4px; font-weight: 850; letter-spacing: .06em; }
.sm4-preview__canvas { display: grid; grid-template-columns: 175px minmax(0, 1fr); min-height: 290px; margin: 0 22px; overflow: hidden; border: 1px solid #d6d2cc; border-radius: 14px; background: #fff; box-shadow: 0 18px 44px rgba(20,16,12,.06); }
.sm4-preview__canvas > aside { padding: 17px 14px; border-right: 1px solid #e0dcd6; background: #f0ede8; }
.sm4-preview__canvas > aside > span { color: #8a857e; font-size: 5px; font-weight: 850; letter-spacing: .12em; }
.sm4-preview__canvas ul { display: grid; gap: 4px; padding: 0; margin: 13px 0 0; list-style: none; }
.sm4-preview__canvas li { min-height: 34px; display: grid; grid-template-columns: 9px minmax(0,1fr) auto; align-items: center; gap: 4px; padding: 0 8px; border-radius: 7px; color: #746f68; font-size: 7px; font-weight: 650; }
.sm4-preview__canvas li > i { color: #bbb6b0; font-size: 4px; }
.sm4-preview__canvas li b { color: #99938d; font-size: 5px; }
.sm4-preview__canvas li.is-active { color: #181614; background: #fff; box-shadow: 0 4px 14px rgba(20,16,12,.07); }
.sm4-preview__canvas li.is-active > i { color: var(--sm4-ui-accent); }
.sm4-preview__canvas > aside > button { width: 100%; height: 30px; display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 13px; border: 1px dashed #ccc7c0; border-radius: 7px; color: #807a74; background: transparent; font-size: 6px; font-weight: 750; }
.sm4-preview__calendar { min-width: 0; padding: 17px; }
.sm4-preview__calendar > header { min-height: 35px; display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.sm4-preview__calendar > header div strong, .sm4-preview__calendar > header div small { display: block; }
.sm4-preview__calendar > header div strong { font-size: 10px; }
.sm4-preview__calendar > header div small { margin-top: 3px; color: #908b85; font-size: 6px; }
.sm4-preview__calendar > header > span { display: flex; align-items: center; overflow: hidden; border: 1px solid #dedad4; border-radius: 7px; }
.sm4-preview__calendar > header > span i, .sm4-preview__calendar > header > span b { height: 25px; display: grid; place-items: center; padding: 0 8px; border-right: 1px solid #dedad4; color: #746f69; font-size: 6px; font-weight: 750; }
.sm4-preview__calendar > header > span i:last-child { border-right: 0; }
.sm4-preview__days { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 13px; border: 1px solid #e2ded8; border-radius: 8px 8px 0 0; }
.sm4-preview__days > span { min-height: 42px; display: grid; place-items: center; gap: 2px; border-right: 1px solid #e2ded8; color: #a09a94; font-size: 5px; font-weight: 850; letter-spacing: .08em; }
.sm4-preview__days > span:last-child { border-right: 0; }
.sm4-preview__days small { color: #4e4945; font-size: 8px; }
.sm4-preview__days .is-today { color: var(--sm4-ui-accent); background: rgba(255,40,40,.045); }
.sm4-preview__plan { display: grid; grid-template-columns: repeat(3, 1fr); min-height: 122px; border: 1px solid #e2ded8; border-top: 0; border-radius: 0 0 8px 8px; }
.sm4-preview__plan article { min-width: 0; display: grid; grid-template-columns: 24px minmax(0,1fr); align-content: start; gap: 7px; padding: 14px 9px; border-right: 1px solid #e2ded8; }
.sm4-preview__plan article:last-child { border-right: 0; }
.sm4-preview__plan article > i { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; color: var(--sm4-ui-accent); background: rgba(255,40,40,.08); font-size: 7px; }
.sm4-preview__plan article span b, .sm4-preview__plan article span small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm4-preview__plan article span b { font-size: 7px; }
.sm4-preview__plan article span small { margin-top: 4px; color: #8b857f; font-size: 5px; }
.sm4-preview__plan article em { grid-column: 2; color: #aaa49e; font-size: 5px; font-style: normal; }
.sm4-preview__stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)) auto; gap: 0; margin: 18px 22px 0; border-top: 1px solid #d9d5cf; }
.sm4-preview__stats > span { min-height: 64px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid #d9d5cf; }
.sm4-preview__stats small { color: #98928c; font-size: 5px; font-weight: 850; letter-spacing: .1em; }
.sm4-preview__stats b { margin-top: 5px; font-size: 9px; }
.sm4-preview__stats button { align-self: center; min-width: 95px; height: 32px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 8px; color: #fff; background: #111; font-size: 6px; font-weight: 750; }
.sm4-workspace .sm4-preview.is-changing .sm4-preview__intro,
.sm4-workspace .sm4-preview.is-changing .sm4-preview__stats { animation: sm4Swap .42s var(--sm-ease); }

.sm4-board { margin-top: 64px; overflow: hidden; border: 1px solid #2b2b2b; border-radius: 24px; background: #0d0d0d; box-shadow: 0 28px 70px rgba(20,16,12,.13); }
.sm4-board__bar { min-height: 66px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 0 18px; border-bottom: 1px solid #292929; color: #efede9; }
.sm4-board__bar > div:first-child { display: flex; align-items: center; gap: 10px; }
.sm4-board__bar > div:first-child > i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: var(--sm-red); background: rgba(255,40,40,.1); font-size: 10px; }
.sm4-board__bar > div:first-child span strong, .sm4-board__bar > div:first-child span small { display: block; }
.sm4-board__bar > div:first-child span strong { font-size: 10px; }
.sm4-board__bar > div:first-child span small { margin-top: 4px; color: #65615d; font-size: 6px; }
.sm4-board__bar nav { display: flex; padding: 4px; border: 1px solid #292929; border-radius: 9px; background: #161616; }
.sm4-board__bar button { height: 30px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; border: 1px solid transparent; border-radius: 7px; color: #77736f; background: transparent; font-size: 6px; font-weight: 750; }
.sm4-board__bar nav button.is-active { color: #f5f2ee; background: #292929; }
.sm4-board__bar > div:last-child { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.sm4-board__bar > div:last-child > span { display: flex; align-items: center; gap: 6px; margin-right: 5px; color: #6e6964; font-size: 6px; font-weight: 750; }
.sm4-board__bar > div:last-child > span i { width: 5px; height: 5px; border-radius: 50%; background: #53d69a; }
.sm4-board__bar > div:last-child > button { border-color: #303030; background: #171717; }
.sm4-board__bar > div:last-child > .is-add { border-color: var(--sm-red); color: #fff; background: var(--sm-red); }
.sm4-board__columns { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; padding: 14px; background: #292929; }
.sm4-board__columns > section { min-width: 0; padding: 12px; background: #e9e6e0; }
.sm4-board__columns > section > header { min-height: 35px; display: flex; align-items: flex-start; justify-content: space-between; color: #6f6a64; font-size: 6px; font-weight: 850; letter-spacing: .09em; }
.sm4-board__columns > section > header span { display: flex; align-items: center; gap: 7px; }
.sm4-board__columns > section > header span i { width: 6px; height: 6px; border: 1px solid #aaa49d; border-radius: 50%; }
.sm4-board__columns > section:nth-child(2) > header span i { border-color: #e8a75c; background: #e8a75c; }
.sm4-board__columns > section:nth-child(3) > header span i { border-color: var(--sm-red); background: var(--sm-red); }
.sm4-board__columns > section:nth-child(4) > header span i { border-color: #53b987; background: #53b987; }
.sm4-board__columns > section > header b { min-width: 20px; height: 20px; display: grid; place-items: center; border-radius: 6px; color: #77716b; background: #d9d5ce; font-size: 6px; }
.sm4-board__columns article { position: relative; min-height: 136px; overflow: hidden; padding: 13px; margin-top: 9px; border: 1px solid #d4d0c9; border-radius: 12px; background: #f9f7f3; box-shadow: 0 8px 22px rgba(20,16,12,.04); }
.sm4-board__columns article.is-selected { border-color: rgba(255,40,40,.45); box-shadow: 0 0 0 2px rgba(255,40,40,.05); }
.sm4-board__columns article.has-cover { min-height: 214px; padding-top: 94px; }
.sm4-board__columns article.has-cover::after { position: absolute; inset: 0 0 auto; z-index: 0; height: 82px; content: ""; background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.55)); }
.sm4-board__columns article.has-cover > img { position: absolute; inset: 0 0 auto; width: 100%; height: 82px; object-fit: cover; filter: saturate(.76) brightness(.85); }
.sm4-board__columns article > div:first-of-type { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; }
.sm4-board__columns article > div:first-of-type > span { padding: 5px 6px; border-radius: 5px; color: #6c6761; background: #e8e4dd; font-size: 5px; font-weight: 850; letter-spacing: .08em; }
.sm4-board__columns article > div:first-of-type > .is-reels,
.sm4-board__columns article > div:first-of-type > .is-live { color: #fff; background: var(--sm-red); }
.sm4-board__columns article > div:first-of-type > .is-live { display: flex; align-items: center; gap: 5px; }
.sm4-board__columns article > div:first-of-type > .is-live i { width: 4px; height: 4px; border-radius: 50%; background: #fff; animation: sm4Live 1.4s ease-in-out infinite; }
.sm4-board__columns article > div:first-of-type > i { color: #9d9790; font-size: 8px; }
.sm4-board__columns article.has-cover > div:first-of-type > i { color: #fff; }
.sm4-board__columns article h3 { position: relative; z-index: 1; margin-top: 13px; font-size: 11px; line-height: 1.15; letter-spacing: -.02em; }
.sm4-board__columns article p { position: relative; z-index: 1; margin-top: 6px; color: #8a847e; font-size: 6px; line-height: 1.5; }
.sm4-board__columns article footer { position: absolute; right: 13px; bottom: 12px; left: 13px; z-index: 1; display: flex; align-items: center; justify-content: space-between; }
.sm4-board__columns article footer > span { display: flex; align-items: center; gap: 5px; color: #8b857f; font-size: 5px; font-weight: 750; }
.sm4-board__columns article footer > div { display: flex; }
.sm4-board__columns article footer > div i { width: 19px; height: 19px; display: grid; place-items: center; margin-left: -4px; border: 2px solid #f9f7f3; border-radius: 50%; color: #fff; background: #24211f; font-size: 5px; font-style: normal; font-weight: 850; }
.sm4-board__columns article footer > div i:first-child { margin-left: 0; background: var(--sm-red); }
.sm4-board__progress { position: relative; height: 22px; margin-top: 11px; border-radius: 6px; background: #ebe7e0; }
.sm4-board__progress i { position: absolute; inset: 0 28% 0 0; border-radius: inherit; background: rgba(255,40,40,.14); }
.sm4-board__progress span { position: relative; z-index: 1; height: 100%; display: flex; align-items: center; padding-left: 8px; color: var(--sm-red); font-size: 5px; font-weight: 850; letter-spacing: .08em; }
@keyframes sm4Live { 50% { opacity: .35; } }

.sm4-board .sm4-delivery { margin: 0; border: 0; border-top: 1px solid #292929; color: #fff; background: #111; }
.sm4-board .sm4-delivery > p { min-height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; border-bottom-color: #292929; color: #76716c; }
.sm4-board .sm4-delivery > p span { display: flex; align-items: center; gap: 7px; min-height: 0; padding: 0; border: 0; font-size: 6px; }
.sm4-board .sm4-delivery > p span i { width: 5px; height: 5px; border-radius: 50%; background: var(--sm-red); }
.sm4-board .sm4-delivery > p b { color: #69645f; font-size: 6px; }
.sm4-board .sm4-delivery > div { grid-template-columns: repeat(8, 1fr); }
.sm4-board .sm4-delivery > div > span,
.sm4-board .sm4-delivery > div > span:nth-child(n) { min-height: 62px; justify-content: center; padding: 10px 8px; border-right: 1px solid #292929; border-bottom: 0; color: #8e8983; font-size: 6px; text-align: center; }
.sm4-board .sm4-delivery > div > span:last-child { border-right: 0; }
.sm4-board .sm4-delivery > div > span i { color: var(--sm-red); font-size: 9px; }

@media (max-width: 1100px) {
  .sm4-workspace__body { grid-template-columns: 215px minmax(0,1fr); }
  .sm4-preview__canvas { grid-template-columns: 150px minmax(0,1fr); }
  .sm4-board__bar { grid-template-columns: 1fr auto; }
  .sm4-board__bar nav { display: none; }
  .sm4-board__columns { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sm4-board .sm4-delivery > div { grid-template-columns: repeat(4,1fr); }
  .sm4-board .sm4-delivery > div > span:nth-child(-n+4) { border-bottom: 1px solid #292929; }
}

@media (max-width: 767px) {
  .sm4-workspace, .sm4-board { margin-top: 42px; border-radius: 16px; }
  .sm4-workspace__bar { min-height: 56px; grid-template-columns: 1fr auto; padding: 0 12px; }
  .sm4-workspace__brand span, .sm4-workspace__bar nav, .sm4-workspace__team > div, .sm4-workspace__team > span { display: none; }
  .sm4-workspace__body { grid-template-columns: 1fr; }
  .sm4-workspace__rail { padding: 13px 10px; border-right: 0; border-bottom: 1px solid #292929; }
  .sm4-workspace__rail-head, .sm4-workspace__health { display: none; }
  .sm4-workspace .sm4-services { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sm4-workspace .sm4-services button { min-height: 54px; grid-template-columns: 28px minmax(0,1fr) 8px; padding: 7px; }
  .sm4-workspace .sm4-services button > span { width: 27px; height: 27px; }
  .sm4-workspace .sm4-services button > strong { font-size: 8px; }
  .sm4-workspace .sm4-services button > small { display: none; }
  .sm4-workspace .sm4-preview__top { padding: 0 14px; }
  .sm4-preview__intro { gap: 12px; padding: 17px 14px; }
  .sm4-workspace .sm4-preview__intro strong { font-size: 20px; }
  .sm4-workspace .sm4-preview__intro p { font-size: 8px; }
  .sm4-preview__intro figure { width: 55px; height: 55px; }
  .sm4-preview__canvas { grid-template-columns: 1fr; margin: 0 14px; }
  .sm4-preview__canvas > aside { display: none; }
  .sm4-preview__calendar { padding: 13px; }
  .sm4-preview__calendar > header > span { display: none; }
  .sm4-preview__days > span { min-height: 38px; }
  .sm4-preview__plan { min-height: 112px; }
  .sm4-preview__plan article { grid-template-columns: 1fr; gap: 5px; padding: 10px 6px; }
  .sm4-preview__plan article > i { width: 22px; height: 22px; }
  .sm4-preview__plan article em { grid-column: 1; }
  .sm4-preview__stats { grid-template-columns: repeat(3,1fr); margin: 15px 14px 0; }
  .sm4-preview__stats > span { min-height: 55px; padding-right: 5px; }
  .sm4-preview__stats button { grid-column: 1 / -1; width: 100%; margin: 12px 0 15px; }
  .sm4-board__bar { min-height: 62px; grid-template-columns: 1fr auto; padding: 0 11px; }
  .sm4-board__bar > div:last-child > span, .sm4-board__bar > div:last-child > button:not(.is-add) { display: none; }
  .sm4-board__bar > div:last-child > .is-add { width: 31px; padding: 0; }
  .sm4-board__bar > div:last-child > .is-add { font-size: 0; }
  .sm4-board__bar > div:last-child > .is-add i { font-size: 7px; }
  .sm4-board__columns { grid-auto-flow: column; grid-auto-columns: 82%; grid-template-columns: none; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; padding: 10px; scrollbar-width: none; }
  .sm4-board__columns::-webkit-scrollbar { display: none; }
  .sm4-board__columns > section { scroll-snap-align: start; }
  .sm4-board .sm4-delivery > div { grid-template-columns: repeat(2,1fr); }
  .sm4-board .sm4-delivery > div > span:nth-child(n) { min-height: 52px; border-right: 1px solid #292929; border-bottom: 1px solid #292929; }
  .sm4-board .sm4-delivery > div > span:nth-child(2n) { border-right: 0; }
  .sm4-board .sm4-delivery > div > span:nth-child(n+7) { border-bottom: 0; }
}

/* v7 — hero content studio */
.sm4-control.sm4-studio { min-height: 584px; border-color: #343434; border-radius: 24px; background: #0b0b0b; box-shadow: 18px 22px 0 rgba(0,0,0,.52), 0 30px 70px rgba(0,0,0,.24); }
.sm4-studio .sm4-control__head { min-height: 44px; padding: 0 15px; background: #0f0f0f; }
.sm4-studio .sm4-control__head b { display: flex; align-items: center; gap: 7px; }
.sm4-studio .sm4-control__head b > i { width: 5px; height: 5px; border-radius: 50%; background: #52d796; box-shadow: 0 0 0 4px rgba(82,215,150,.08); }
.sm4-studio__body { height: 490px; display: grid; grid-template-columns: 155px minmax(250px, 1fr) 160px; overflow: hidden; }

.sm4-studio__queue { min-width: 0; padding: 14px 10px; border-right: 1px solid #292929; background: #0d0d0d; }
.sm4-studio__queue > header { min-height: 28px; display: flex; align-items: center; justify-content: space-between; padding: 0 4px; color: #66615d; font-size: 5px; font-weight: 850; letter-spacing: .12em; }
.sm4-studio__queue > header b { min-width: 19px; height: 19px; display: grid; place-items: center; border-radius: 6px; color: #99938d; background: #1c1c1c; font-size: 5px; }
.sm4-studio__item { position: relative; width: 100%; min-height: 82px; display: grid; grid-template-columns: 43px minmax(0,1fr) 12px; align-items: center; gap: 8px; padding: 8px; margin-top: 6px; overflow: hidden; border: 1px solid transparent; border-radius: 12px; color: #8d8882; background: transparent; text-align: left; cursor: pointer; transition: border-color .35s ease, background .35s ease, transform .35s var(--sm-ease); }
.sm4-studio__item:hover, .sm4-studio__item.is-active { border-color: #343434; color: #fff; background: #1a1a1a; transform: translateX(3px); }
.sm4-studio__item.is-active { border-color: rgba(255,40,40,.46); box-shadow: 0 10px 28px rgba(0,0,0,.22); }
.sm4-studio__item img { width: 43px; height: 58px; object-fit: cover; border-radius: 8px; filter: saturate(.74) brightness(.74); }
.sm4-studio__item.is-active img { filter: saturate(.95) brightness(.86); }
.sm4-studio__item span { min-width: 0; }
.sm4-studio__item strong, .sm4-studio__item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm4-studio__item strong { color: #aaa59f; font-size: 6px; font-weight: 850; letter-spacing: .08em; }
.sm4-studio__item.is-active strong { color: #fff; }
.sm4-studio__item small { margin-top: 6px; color: #5f5a56; font-size: 5px; }
.sm4-studio__item > i { color: #55514d; font-size: 7px; }
.sm4-studio__item.is-active > i { color: var(--sm-red); }
.sm4-studio__new { min-height: 50px; display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 8px; padding: 8px; margin-top: 8px; border: 1px dashed #303030; border-radius: 10px; color: #625d59; }
.sm4-studio__new > i { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; background: #191919; font-size: 7px; }
.sm4-studio__new b, .sm4-studio__new small { display: block; }
.sm4-studio__new b { color: #85807a; font-size: 6px; }
.sm4-studio__new small { margin-top: 3px; font-size: 5px; }

.sm4-studio__canvas { position: relative; min-width: 0; padding: 12px 15px 11px; overflow: hidden; border-right: 1px solid #292929; background: radial-gradient(circle at 50% 12%, rgba(255,40,40,.085), transparent 36%), #121212; }
.sm4-studio__canvas::before { position: absolute; inset: 0; content: ""; pointer-events: none; opacity: .26; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 40px 40px; }
.sm4-studio__canvas > header { position: relative; z-index: 2; min-height: 28px; display: flex; align-items: center; justify-content: space-between; color: #77726d; font-size: 5px; font-weight: 800; letter-spacing: .06em; }
.sm4-studio__canvas > header span { display: flex; align-items: center; gap: 7px; }
.sm4-studio__canvas > header span i { color: var(--sm-red); font-size: 9px; }
.sm4-studio__canvas > header b { display: flex; align-items: center; gap: 6px; color: #68635f; font: inherit; }
.sm4-studio__canvas > header b i { width: 5px; height: 5px; border-radius: 50%; background: var(--sm-red); }
.sm4-reel { position: relative; z-index: 2; width: min(235px, 88%); height: 390px; margin: 4px auto 0; overflow: hidden; border: 1px solid #3a3a3a; border-radius: 21px; background: #090909; box-shadow: 0 24px 55px rgba(0,0,0,.46); isolation: isolate; }
.sm4-reel::before { position: absolute; inset: 0; z-index: 1; content: ""; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.48) 0, transparent 30%, transparent 54%, rgba(0,0,0,.92) 100%); }
.sm4-reel > img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.88) brightness(.78); transform: scale(1.01); transition: opacity .35s ease, transform .9s var(--sm-ease); }
.sm4-reel:hover > img { transform: scale(1.055); }
.sm4-reel__top { position: absolute; top: 14px; right: 14px; left: 14px; z-index: 2; display: flex; align-items: center; justify-content: space-between; }
.sm4-reel__top > span { padding: 5px 7px; border: 1px solid rgba(255,255,255,.22); border-radius: 6px; color: #fff; background: rgba(10,10,10,.34); backdrop-filter: blur(10px); font-size: 5px; font-weight: 850; letter-spacing: .12em; }
.sm4-reel__top > b { display: flex; align-items: center; gap: 5px; color: rgba(255,255,255,.72); font-size: 5px; letter-spacing: .08em; }
.sm4-reel__top > b i { width: 5px; height: 5px; border-radius: 50%; background: #57d99c; animation: sm4Live 1.4s ease-in-out infinite; }
.sm4-reel > button { position: absolute; top: 42%; left: 50%; z-index: 3; width: 45px; height: 45px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.42); border-radius: 50%; color: #080808; background: rgba(255,255,255,.92); box-shadow: 0 12px 28px rgba(0,0,0,.28); transform: translate(-50%,-50%); font-size: 11px; cursor: pointer; }
.sm4-reel__actions { position: absolute; right: 12px; bottom: 72px; z-index: 3; display: grid; gap: 12px; }
.sm4-reel__actions span { display: grid; justify-items: center; gap: 3px; color: #fff; }
.sm4-reel__actions i { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: rgba(6,6,6,.44); backdrop-filter: blur(8px); font-size: 10px; }
.sm4-reel__actions b { font-size: 5px; }
.sm4-reel figcaption { position: absolute; right: 48px; bottom: 16px; left: 14px; z-index: 3; color: #fff; }
.sm4-reel figcaption > span { display: inline-flex; align-items: center; min-height: 19px; padding: 0 7px; border-radius: 6px; color: #fff; background: var(--sm-red); font-size: 5px; font-weight: 850; letter-spacing: .09em; }
.sm4-reel figcaption h3 { margin-top: 8px; color: #fff; font-size: clamp(16px, 1.55vw, 22px); line-height: .98; letter-spacing: -.04em; }
.sm4-reel figcaption p { max-width: 170px; margin-top: 6px; color: rgba(255,255,255,.64); font-size: 6px; line-height: 1.45; }
.sm4-studio__timeline { position: relative; z-index: 2; height: 34px; display: grid; grid-template-columns: 22px 28px 1fr 25px; align-items: center; gap: 7px; margin-top: 7px; color: #716c67; font-size: 5px; }
.sm4-studio__timeline > button { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid #323232; border-radius: 6px; color: #aaa49e; background: #1b1b1b; font-size: 6px; }
.sm4-studio__timeline > div { position: relative; height: 22px; display: flex; align-items: center; gap: 2px; overflow: hidden; }
.sm4-studio__timeline > div i { width: 2px; height: var(--h, 30%); flex: 1; border-radius: 2px; background: #3b3835; }
.sm4-studio__timeline > div i:nth-child(2) { --h: 80%; }.sm4-studio__timeline > div i:nth-child(3) { --h: 54%; }.sm4-studio__timeline > div i:nth-child(4) { --h: 92%; }.sm4-studio__timeline > div i:nth-child(5) { --h: 44%; }.sm4-studio__timeline > div i:nth-child(6) { --h: 70%; }.sm4-studio__timeline > div i:nth-child(7) { --h: 100%; }.sm4-studio__timeline > div i:nth-child(8) { --h: 58%; }
.sm4-studio__timeline > div b { position: absolute; top: 0; bottom: 0; left: 62%; width: 1px; background: var(--sm-red); box-shadow: 0 0 7px rgba(255,40,40,.8); }

.sm4-studio__insights { min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px 10px; background: #0d0d0d; }
.sm4-studio__insights > section { position: relative; overflow: hidden; padding: 13px; border: 1px solid #2b2b2b; border-radius: 13px; background: #151515; }
.sm4-studio__publish { min-height: 132px; }
.sm4-studio__publish > span, .sm4-studio__metric header span { color: #65605c; font-size: 5px; font-weight: 850; letter-spacing: .11em; }
.sm4-studio__publish > i { position: absolute; top: 12px; right: 12px; color: #53d797; font-size: 11px; }
.sm4-studio__publish strong, .sm4-studio__publish small { display: block; }
.sm4-studio__publish strong { margin-top: 18px; color: #f1eee9; font-size: 15px; letter-spacing: -.03em; }
.sm4-studio__publish small { margin-top: 5px; color: #706b66; font-size: 6px; }
.sm4-studio__publish button { width: 100%; height: 29px; display: flex; align-items: center; justify-content: space-between; padding: 0 9px; margin-top: 16px; border: 0; border-radius: 7px; color: #fff; background: var(--sm-red); font-size: 6px; font-weight: 750; }
.sm4-studio__metric { min-height: 166px; }
.sm4-studio__metric header { display: flex; align-items: center; justify-content: space-between; }
.sm4-studio__metric header b { color: #58d99b; font-size: 7px; }
.sm4-studio__metric > strong, .sm4-studio__metric > small { display: block; }
.sm4-studio__metric > strong { margin-top: 15px; color: #f5f2ee; font-size: 25px; line-height: 1; letter-spacing: -.06em; }
.sm4-studio__metric > small { margin-top: 3px; color: #6e6964; font-size: 6px; }
.sm4-studio__metric > div { height: 57px; display: flex; align-items: flex-end; gap: 4px; margin-top: 12px; }
.sm4-studio__metric > div i { height: var(--v); flex: 1; border-radius: 2px 2px 0 0; background: #33302d; }
.sm4-studio__metric > div i:nth-last-child(-n+2) { background: var(--sm-red); }
.sm4-studio__signal { min-height: 145px; }
.sm4-studio__signal > span { display: flex; align-items: center; gap: 6px; color: var(--sm-red); font-size: 5px; font-weight: 850; letter-spacing: .11em; }
.sm4-studio__signal p { margin-top: 18px; color: #c6c1bb; font-size: 9px; font-weight: 600; line-height: 1.38; }
.sm4-studio__signal small { position: absolute; right: 13px; bottom: 12px; left: 13px; display: flex; align-items: center; gap: 6px; color: #615d58; font-size: 5px; }
.sm4-studio__signal small i { width: 5px; height: 5px; border-radius: 50%; background: #53d797; }
.sm4-studio .sm4-control__foot { min-height: 50px; padding: 0 15px; }
.sm4-studio .sm4-control__foot > span { display: flex; align-items: center; }
.sm4-studio .sm4-control__foot > span::before { display: none; }
.sm4-studio .sm4-control__foot > span > i { width: 5px; height: 5px; margin-right: 7px; border-radius: 50%; background: #53d797; }
.sm4-studio.is-changing .sm4-reel > img,
.sm4-studio.is-changing .sm4-reel figcaption { animation: sm4StudioSwap .42s var(--sm-ease); }
@keyframes sm4StudioSwap { 45% { opacity: .25; transform: translateY(7px); } }

@media (max-width: 1180px) {
  .sm4-studio__body { grid-template-columns: 175px minmax(280px,1fr) 185px; }
  .sm4-reel { width: 250px; }
}

@media (max-width: 767px) {
  .sm4-control.sm4-studio { min-height: 632px; border-radius: 16px; box-shadow: 10px 12px 0 rgba(0,0,0,.52); }
  .sm4-studio .sm4-control__head { padding: 0 11px; }
  .sm4-studio__body { height: 538px; grid-template-columns: 70px minmax(0,1fr); }
  .sm4-studio__queue { padding: 10px 7px; }
  .sm4-studio__queue > header span, .sm4-studio__item span, .sm4-studio__item > i, .sm4-studio__new span { display: none; }
  .sm4-studio__queue > header { justify-content: center; }
  .sm4-studio__item { min-height: 75px; display: grid; grid-template-columns: 1fr; place-items: center; padding: 6px; }
  .sm4-studio__item:hover, .sm4-studio__item.is-active { transform: none; }
  .sm4-studio__item img { width: 46px; height: 59px; }
  .sm4-studio__new { min-height: 45px; display: grid; grid-template-columns: 1fr; place-items: center; padding: 4px; }
  .sm4-studio__canvas { padding: 10px 8px 8px; border-right: 0; }
  .sm4-studio__canvas > header { padding-inline: 4px; }
  .sm4-reel { width: min(222px, 96%); height: 410px; border-radius: 18px; }
  .sm4-reel figcaption h3 { font-size: 18px; }
  .sm4-reel figcaption p { font-size: 6px; }
  .sm4-studio__timeline { grid-template-columns: 20px 23px 1fr 22px; gap: 5px; }
  .sm4-studio__insights { display: none; }
  .sm4-studio .sm4-control__foot > span:nth-child(2) { display: none; }
}

/* v8 — readable editorial social wall */
.sm4-hero:has(.sm4-social-wall) { min-height: auto; }
.sm4-hero:has(.sm4-social-wall) .sm4-hero__grid {
  min-height: 650px;
  grid-template-columns: minmax(360px, .82fr) minmax(610px, 1.18fr);
  gap: clamp(34px, 4.5vw, 76px);
  padding-block: 34px 48px;
}

.sm4-social-wall {
  position: relative;
  min-width: 0;
  min-height: 570px;
  overflow: hidden;
  border: 1px solid #323232;
  border-radius: 26px;
  background: #0c0c0c;
  box-shadow: 18px 22px 0 #050505, 0 34px 80px rgba(0,0,0,.28);
  isolation: isolate;
}
.sm4-social-wall::before {
  position: absolute;
  inset: 58px 0 0;
  z-index: -1;
  content: "";
  opacity: .65;
  background:
    radial-gradient(circle at 50% 44%, rgba(255,40,40,.15), transparent 35%),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: auto, 52px 52px, 52px 52px;
}
.sm4-social-wall__head {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 20px;
  border-bottom: 1px solid #292929;
  background: rgba(12,12,12,.92);
}
.sm4-social-wall__head > a {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #f5f3ef !important;
  text-decoration: none !important;
}
.sm4-social-wall__head > a > i {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  background: var(--sm-red);
  font-size: 15px;
}
.sm4-social-wall__head span,
.sm4-social-wall__head strong,
.sm4-social-wall__head small { display: block; }
.sm4-social-wall__head strong { font-size: 11px; line-height: 1.2; }
.sm4-social-wall__head small { margin-top: 3px; color: #77726d; font-size: 8px; }
.sm4-social-wall__head > div { display: flex; align-items: center; gap: 7px; }
.sm4-social-wall__head > div i {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border: 1px solid #303030;
  border-radius: 9px;
  color: #9b9690;
  background: #151515;
  font-size: 11px;
}

.sm4-social-wall__stage { position: relative; height: 510px; overflow: hidden; }
.sm4-social-post {
  position: absolute;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px;
  color: #fff;
  background: #111;
  box-shadow: 0 22px 60px rgba(0,0,0,.5);
  transition: transform .55s var(--sm-ease), opacity .35s ease, filter .35s ease;
}
.sm4-social-post::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.28), transparent 38%, rgba(0,0,0,.9) 100%);
}
.sm4-social-post > img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.88) brightness(.8); }
.sm4-social-post > header {
  position: absolute;
  z-index: 2;
  top: 13px;
  right: 13px;
  left: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 8px;
  font-weight: 750;
  letter-spacing: .06em;
}
.sm4-social-post > header > span { display: flex; align-items: center; gap: 6px; }
.sm4-social-post > header > span i { color: var(--sm-red); }
.sm4-social-post > header > b { color: rgba(255,255,255,.72); font: inherit; }
.sm4-social-post > footer { position: absolute; right: 15px; bottom: 15px; left: 15px; z-index: 2; }
.sm4-social-post > footer strong { display: block; color: #fff; font-size: 16px; line-height: 1.04; letter-spacing: -.035em; }
.sm4-social-post > footer span { display: flex; align-items: center; gap: 6px; margin-top: 8px; color: rgba(255,255,255,.7); font-size: 8px; }

.sm4-social-post--reel {
  z-index: 3;
  top: 24px;
  left: 50%;
  width: 274px;
  height: 438px;
  border-radius: 24px;
  transform: translateX(-50%);
}
.sm4-social-post--reel:hover { transform: translateX(-50%) translateY(-7px); }
.sm4-social-post--reel > footer { right: 20px; bottom: 19px; left: 20px; }
.sm4-social-post--reel > footer small { display: block; margin-bottom: 7px; color: var(--sm-red); font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.sm4-social-post--reel > footer strong { font-size: 30px; line-height: .9; }
.sm4-social-post--reel > footer p { max-width: 205px; margin-top: 10px; color: rgba(255,255,255,.72); font-size: 9px; line-height: 1.5; }
.sm4-social-post--reel > footer span { margin-top: 11px; font-size: 9px; }
.sm4-social-post--reel > footer span i:nth-of-type(2) { margin-left: 9px; }
.sm4-social-post--reel header > b { display: flex; align-items: center; gap: 6px; }
.sm4-social-post--reel header > b i { width: 6px; height: 6px; border-radius: 50%; background: #55d99b; box-shadow: 0 0 0 4px rgba(85,217,155,.12); }
.sm4-social-post__play {
  position: absolute;
  top: 41%;
  left: 50%;
  z-index: 3;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #090909;
  background: rgba(255,255,255,.94);
  box-shadow: 0 14px 34px rgba(0,0,0,.3);
  transform: translate(-50%,-50%);
  font-size: 13px;
}
.sm4-social-post--carousel { top: 142px; left: 20px; z-index: 1; width: 190px; height: 270px; transform: rotate(-5deg); }
.sm4-social-post--carousel:hover { z-index: 4; transform: rotate(-2deg) translateY(-5px); }
.sm4-social-post--story { top: 76px; right: 20px; z-index: 2; width: 190px; height: 275px; transform: rotate(5deg); }
.sm4-social-post--story:hover { z-index: 4; transform: rotate(2deg) translateY(-5px); }
.sm4-social-post--carousel > img,
.sm4-social-post--story > img { filter: saturate(.7) brightness(.66); }
.sm4-social-post--carousel:hover > img,
.sm4-social-post--story:hover > img { filter: saturate(.9) brightness(.78); }

.sm4-social-wall__result {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 13px;
  color: #f4f1ed;
  background: rgba(15,15,15,.86);
  backdrop-filter: blur(13px);
  box-shadow: 0 12px 28px rgba(0,0,0,.3);
}
.sm4-social-wall__result > i { color: #59dd9e; font-size: 14px; }
.sm4-social-wall__result span,
.sm4-social-wall__result small,
.sm4-social-wall__result strong { display: block; }
.sm4-social-wall__result small { color: #77726d; font-size: 7px; font-weight: 800; letter-spacing: .1em; }
.sm4-social-wall__result strong { margin-top: 3px; font-size: 11px; }
.sm4-social-wall__note {
  position: absolute;
  bottom: 23px;
  left: 20px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #85807a;
  font-size: 8px;
}
.sm4-social-wall__note i { width: 6px; height: 6px; border-radius: 50%; background: var(--sm-red); box-shadow: 0 0 0 5px rgba(255,40,40,.09); }

@media (max-width: 1100px) {
  .sm4-hero:has(.sm4-social-wall) .sm4-hero__grid { min-height: 0; grid-template-columns: 1fr; padding-bottom: 58px; }
  .sm4-social-wall { width: min(820px, 100%); margin-inline: auto; }
}

@media (max-width: 767px) {
  .sm4-hero:has(.sm4-social-wall) { padding-bottom: 24px; }
  .sm4-hero:has(.sm4-social-wall) .sm4-hero__grid { gap: 38px; padding-block: 0 28px; }
  .sm4-social-wall { min-height: 494px; border-radius: 18px; box-shadow: 10px 12px 0 #050505; }
  .sm4-social-wall::before { inset-block-start: 56px; background-size: auto, 38px 38px, 38px 38px; }
  .sm4-social-wall__head { min-height: 56px; padding: 0 12px; }
  .sm4-social-wall__head > a { gap: 8px; }
  .sm4-social-wall__head > a > i { width: 31px; height: 31px; border-radius: 9px; font-size: 13px; }
  .sm4-social-wall__head strong { font-size: 10px; }
  .sm4-social-wall__head small { font-size: 7px; }
  .sm4-social-wall__head > div { gap: 4px; }
  .sm4-social-wall__head > div i { width: 25px; height: 25px; font-size: 9px; }
  .sm4-social-wall__stage { height: 438px; }
  .sm4-social-post--reel { top: 22px; width: 218px; height: 350px; }
  .sm4-social-post--reel > footer { right: 14px; bottom: 14px; left: 14px; }
  .sm4-social-post--reel > footer small { font-size: 6px; }
  .sm4-social-post--reel > footer strong { font-size: 24px; }
  .sm4-social-post--reel > footer p { max-width: 170px; margin-top: 7px; font-size: 8px; }
  .sm4-social-post--reel > footer span { margin-top: 7px; font-size: 8px; }
  .sm4-social-post--reel > header { font-size: 7px; }
  .sm4-social-post__play { width: 44px; height: 44px; font-size: 11px; }
  .sm4-social-post--carousel { top: 106px; left: -24px; width: 125px; height: 190px; opacity: .72; }
  .sm4-social-post--story { top: 145px; right: -24px; width: 125px; height: 190px; opacity: .72; }
  .sm4-social-post--carousel > header,
  .sm4-social-post--story > header { right: 9px; left: 9px; font-size: 6px; }
  .sm4-social-post--carousel > header b,
  .sm4-social-post--story > header b,
  .sm4-social-post--carousel > footer span,
  .sm4-social-post--story > footer span { display: none; }
  .sm4-social-post--carousel > footer,
  .sm4-social-post--story > footer { right: 10px; bottom: 10px; left: 10px; }
  .sm4-social-post--carousel > footer strong,
  .sm4-social-post--story > footer strong { font-size: 12px; }
  .sm4-social-wall__result { right: 11px; bottom: 15px; padding: 8px 10px; }
  .sm4-social-wall__result > i { font-size: 12px; }
  .sm4-social-wall__result small { font-size: 6px; }
  .sm4-social-wall__result strong { font-size: 9px; }
  .sm4-social-wall__note { bottom: 17px; left: 13px; max-width: 130px; font-size: 7px; line-height: 1.35; }
}

/* v8 — service-led sections, without miniature app chrome */
.sm4-story { height: 150svh; }
.sm4-service-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 68px;
}
.sm4-service-card {
  min-height: 292px;
  display: flex;
  flex-direction: column;
  padding: 30px;
  border: 1px solid #cbc8c2;
  border-radius: 22px;
  color: #111;
  background: rgba(255,255,255,.58);
  transition: transform .42s var(--sm-ease), border-color .3s ease, box-shadow .42s var(--sm-ease);
}
.sm4-service-card:hover { border-color: #aaa59e; box-shadow: 0 18px 44px rgba(13,13,13,.08); transform: translateY(-6px); }
.sm4-service-card.is-featured { color: #fff; border-color: #111; background: #111; }
.sm4-service-card > span {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--sm-red);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
}
.sm4-service-card > span i {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  background: var(--sm-red);
  font-size: 13px;
}
.sm4-service-card h3 { max-width: 320px; margin-top: 32px; font-size: 23px; line-height: 1.05; letter-spacing: -.045em; }
.sm4-service-card p { max-width: 330px; margin-top: 17px; color: #6f6b66; font-size: 12px; line-height: 1.7; }
.sm4-service-card.is-featured p { color: #aaa59e; }
.sm4-service-card footer { padding-top: 18px; margin-top: auto; border-top: 1px solid #d5d1ca; color: #77726c; font-size: 9px; line-height: 1.5; }
.sm4-service-card.is-featured footer { border-color: #2f2f2f; color: #8f8a84; }

.sm4-process-clean {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  padding: 0;
  margin: 68px 0 0;
  border-block: 1px solid #c8c4bd;
  list-style: none;
}
.sm4-process-clean li {
  min-height: 292px;
  display: flex;
  flex-direction: column;
  padding: 27px 25px;
  border-right: 1px solid #c8c4bd;
}
.sm4-process-clean li:last-child { border-right: 0; }
.sm4-process-clean li > span { color: var(--sm-red); font-size: 10px; font-weight: 850; letter-spacing: .12em; }
.sm4-process-clean li > i { width: 46px; height: 46px; display: grid; place-items: center; margin-top: 45px; border: 1px solid #bbb7b0; border-radius: 14px; color: #111; font-size: 15px; }
.sm4-process-clean li > div { margin-top: auto; }
.sm4-process-clean h3 { max-width: 230px; font-size: 21px; line-height: 1.08; letter-spacing: -.04em; }
.sm4-process-clean p { max-width: 245px; margin-top: 12px; color: #716d67; font-size: 11px; line-height: 1.68; }

@media (max-width: 900px) {
  .sm4-service-cards { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sm4-process-clean { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sm4-process-clean li:nth-child(2) { border-right: 0; }
  .sm4-process-clean li:nth-child(-n+2) { border-bottom: 1px solid #c8c4bd; }
}

@media (max-width: 767px) {
  .sm4-story { height: 135svh; }
  .sm4-service-cards { grid-template-columns: 1fr; gap: 10px; margin-top: 44px; }
  .sm4-service-card { min-height: 245px; padding: 24px 22px; border-radius: 17px; }
  .sm4-service-card h3 { margin-top: 25px; font-size: 21px; }
  .sm4-service-card p { margin-top: 14px; font-size: 11px; }
  .sm4-service-card footer { font-size: 8px; }
  .sm4-process-clean { grid-template-columns: 1fr; margin-top: 44px; }
  .sm4-process-clean li { min-height: 220px; border-right: 0; border-bottom: 1px solid #c8c4bd; }
  .sm4-process-clean li:nth-child(n) { border-right: 0; }
  .sm4-process-clean li:last-child { border-bottom: 0; }
  .sm4-process-clean li > i { margin-top: 28px; }
  .sm4-process-clean h3 { font-size: 20px; }
  .sm4-process-clean p { font-size: 11px; }
}

/* v9 — compact social wall and balanced format cards */
.sm4-hero:has(.sm4-social-wall) .sm4-hero__grid {
  min-height: 560px;
  grid-template-columns: minmax(340px, .84fr) minmax(520px, 1.16fr);
  gap: clamp(32px, 4vw, 64px);
  padding-block: 24px 38px;
}

.sm4-social-wall {
  min-height: 500px;
  border-radius: 22px;
  box-shadow: 14px 17px 0 #050505, 0 28px 68px rgba(0,0,0,.25);
}
.sm4-social-wall__stage { height: 442px; }
.sm4-social-post--reel {
  top: 20px;
  width: 226px;
  height: 360px;
  border-radius: 20px;
}
.sm4-social-post--reel > footer { right: 16px; bottom: 15px; left: 16px; }
.sm4-social-post--reel > footer small { margin-bottom: 5px; font-size: 6px; }
.sm4-social-post--reel > footer strong { font-size: 24px; line-height: .94; }
.sm4-social-post--reel > footer p { max-width: 180px; margin-top: 7px; font-size: 8px; line-height: 1.42; }
.sm4-social-post--reel > footer span { margin-top: 8px; font-size: 8px; }
.sm4-social-post__play { width: 44px; height: 44px; font-size: 11px; }
.sm4-social-post--carousel { top: 112px; left: 18px; width: 158px; height: 224px; }
.sm4-social-post--story { top: 68px; right: 18px; width: 158px; height: 228px; }
.sm4-social-post > header { top: 11px; right: 11px; left: 11px; font-size: 7px; }
.sm4-social-post > footer { right: 12px; bottom: 12px; left: 12px; }
.sm4-social-post > footer strong { font-size: 14px; }
.sm4-social-post > footer span { margin-top: 6px; font-size: 7px; }
.sm4-social-wall__result { right: 14px; bottom: 14px; gap: 8px; padding: 8px 10px; }
.sm4-social-wall__result > i { font-size: 12px; }
.sm4-social-wall__result strong { font-size: 10px; }
.sm4-social-wall__note { bottom: 18px; left: 16px; font-size: 7px; }

.sm4-formats { padding: 94px 0 100px; }
body:not(.onon-home) .onon-inner.sm4 .sm4-formats .sm4-section-head h2 {
  max-width: 620px;
  font-size: clamp(34px, 3.35vw, 48px) !important;
  line-height: .98 !important;
}
.sm4-formats .sm4-section-head > p:last-child {
  max-width: 410px;
  font-size: 12px;
  line-height: 1.7;
}
.sm4-formats__grid {
  height: auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: none;
  gap: 14px;
  margin-top: 52px;
}
.sm4-format,
.sm4-format.is-reels,
.sm4-format.is-carousel,
.sm4-format.is-story {
  min-height: 408px;
  grid-column: auto;
  grid-row: auto;
  padding: 20px;
  border-color: #292929;
  border-radius: 20px;
  background: #101010;
  box-shadow: 0 18px 44px rgba(0,0,0,.2);
  transition: transform .5s var(--sm-ease), border-color .35s ease, box-shadow .5s var(--sm-ease);
}
.sm4-format:hover {
  border-color: #484848;
  box-shadow: 0 24px 58px rgba(0,0,0,.3);
  transform: translateY(-6px);
}
.sm4-format::after,
.sm4-format.is-reels::after,
.sm4-format.is-carousel::after,
.sm4-format.is-story::after {
  inset: 28% 0 0;
  background: linear-gradient(180deg, transparent 0%, rgba(5,5,5,.48) 24%, rgba(5,5,5,.97) 72%);
}
.sm4-format img,
.sm4-format.is-carousel img,
.sm4-format.is-story img {
  inset: 0;
  width: 100%;
  height: 100%;
  object-position: center 34%;
  filter: saturate(.68) brightness(.64) contrast(1.04);
}
.sm4-format.is-carousel .sm4-format__copy,
.sm4-format.is-story .sm4-format__copy { max-width: 100%; }
.sm4-format__top { font-size: 7px; }
.sm4-format__top i { width: 36px; height: 36px; }
.sm4-format small { font-size: 7px; }
.sm4-format h3 {
  max-width: 280px;
  margin-top: 9px;
  font-size: clamp(20px, 1.65vw, 23px);
  line-height: 1.02;
}
.sm4-format p { margin-top: 11px; font-size: 10px; line-height: 1.55; }
.sm4-format__copy ul { gap: 5px; margin-top: 14px; }
.sm4-format__copy li { padding: 5px 7px; font-size: 6px; }

@media (max-width: 1100px) {
  .sm4-hero:has(.sm4-social-wall) .sm4-hero__grid {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 42px;
    padding-bottom: 52px;
  }
  .sm4-social-wall { width: min(720px, 100%); }
}

@media (max-width: 980px) {
  .sm4-formats__grid { grid-template-columns: 1fr; gap: 12px; }
  .sm4-format,
  .sm4-format.is-reels,
  .sm4-format.is-carousel,
  .sm4-format.is-story { min-height: 360px; }
}

@media (max-width: 767px) {
  .sm4-hero:has(.sm4-social-wall) .sm4-hero__grid { gap: 30px; padding-block: 0 24px; }
  .sm4-social-wall { min-height: 430px; border-radius: 17px; box-shadow: 8px 10px 0 #050505; }
  .sm4-social-wall__head { min-height: 52px; }
  .sm4-social-wall::before { inset-block-start: 52px; }
  .sm4-social-wall__stage { height: 378px; }
  .sm4-social-post--reel { top: 18px; width: 188px; height: 302px; }
  .sm4-social-post--reel > footer strong { font-size: 20px; }
  .sm4-social-post--reel > footer p { max-width: 150px; font-size: 7px; }
  .sm4-social-post--reel > footer span { font-size: 7px; }
  .sm4-social-post--carousel { top: 94px; left: -21px; width: 105px; height: 160px; }
  .sm4-social-post--story { top: 112px; right: -21px; width: 105px; height: 160px; }
  .sm4-social-post--carousel > footer strong,
  .sm4-social-post--story > footer strong { font-size: 10px; }
  .sm4-social-wall__result { right: 9px; bottom: 11px; }
  .sm4-social-wall__note { display: none; }
  .sm4-formats { padding: 72px 0 78px; }
  body:not(.onon-home) .onon-inner.sm4 .sm4-formats .sm4-section-head h2 { font-size: 33px !important; }
  .sm4-formats__grid { margin-top: 36px; }
  .sm4-format,
  .sm4-format.is-reels,
  .sm4-format.is-carousel,
  .sm4-format.is-story { min-height: 340px; padding: 18px; border-radius: 17px; }
  .sm4-format h3 { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .sm4 *, .sm4 *::before, .sm4 *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .sm4-ticker__track { transform: none !important; }
}

/* v10 — editorial proof wall and readable format cards. */
.sm4-hero:has(.sm4-social-wall) .sm4-hero__grid{
  min-height:620px;
  grid-template-columns:minmax(380px,.88fr) minmax(560px,1.12fr);
  gap:clamp(40px,4.8vw,76px);
  padding-block:32px 48px;
}
body:not(.onon-home) .onon-inner.sm4 .sm4-hero h1{
  max-width:600px;
  font-size:clamp(44px,4vw,58px)!important;
  line-height:.99!important;
}
.sm4-hero__lead{max-width:550px;color:#bbb6af;font-size:16px;line-height:1.7}
.sm4-hero__disciplines li{color:#9a958f;font-size:10px}
.sm4-social-wall{
  min-height:540px;
  border-color:#393939;
  border-radius:18px;
  background:#0e0e0e;
  box-shadow:14px 17px 0 #050505,0 28px 68px rgba(0,0,0,.24);
}
.sm4-social-wall::before{display:none}
.sm4-social-wall__head{min-height:64px;padding-inline:16px;background:#111}
.sm4-social-wall__head strong{font-size:12px}
.sm4-social-wall__head small{color:#a09b94;font-size:9px}
.sm4-social-wall__head>div i{color:#b2ada6}
.sm4-social-wall__stage{
  height:476px;
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(170px,.65fr);
  grid-template-rows:repeat(2,minmax(0,1fr));
  gap:10px;
  padding:14px 14px 48px;
}
.sm4-social-post,
.sm4-social-post--reel,
.sm4-social-post--carousel,
.sm4-social-post--story{
  position:relative;
  inset:auto;
  width:auto;
  height:auto;
  border-radius:13px;
  box-shadow:none;
  opacity:1;
  transform:none;
}
.sm4-social-post--reel{grid-column:1;grid-row:1 / 3}
.sm4-social-post--carousel{grid-column:2;grid-row:1}
.sm4-social-post--story{grid-column:2;grid-row:2}
.sm4-social-post--reel:hover,
.sm4-social-post--carousel:hover,
.sm4-social-post--story:hover{transform:none}
.sm4-social-post>img,
.sm4-social-post--carousel>img,
.sm4-social-post--story>img{filter:saturate(.86) brightness(.78)}
.sm4-social-post>header{top:13px;right:13px;left:13px;font-size:9px;letter-spacing:.08em}
.sm4-social-post>footer{right:14px;bottom:13px;left:14px}
.sm4-social-post>footer strong{font-size:15px}
.sm4-social-post>footer span{color:rgba(255,255,255,.78);font-size:9px}
.sm4-social-post--reel>footer{right:20px;bottom:18px;left:20px}
.sm4-social-post--reel>footer small{font-size:9px}
.sm4-social-post--reel>footer strong{font-size:30px;line-height:.94}
.sm4-social-post--reel>footer p{max-width:260px;font-size:11px;line-height:1.55}
.sm4-social-post--reel>footer span{font-size:10px}
.sm4-social-post--reel header>b{color:rgba(255,255,255,.78)}
.sm4-social-wall__note{right:14px;bottom:17px;left:16px;max-width:none;color:#aaa59e;font-size:9px}

.sm4-formats{padding:104px 0 112px}
.sm4-formats .sm4-section-head>p:last-child{font-size:15px}
.sm4-formats__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:58px}
.sm4-format,
.sm4-format.is-reels,
.sm4-format.is-carousel,
.sm4-format.is-story{
  min-height:480px;
  padding:24px;
  border-radius:14px;
  box-shadow:0 16px 38px rgba(0,0,0,.18);
  transform:none;
}
.sm4-format:hover{border-color:#494949;box-shadow:0 20px 48px rgba(0,0,0,.24);transform:none}
.sm4-format::after,
.sm4-format.is-reels::after,
.sm4-format.is-carousel::after,
.sm4-format.is-story::after{inset:32% 0 0;background:linear-gradient(180deg,transparent,rgba(5,5,5,.5) 24%,rgba(5,5,5,.97) 72%)}
.sm4-format img,
.sm4-format.is-carousel img,
.sm4-format.is-story img{object-position:center 34%;filter:saturate(.84) brightness(.72) contrast(1.02)}
.sm4-format__top{font-size:10px}
.sm4-format__top i{width:44px;height:44px}
.sm4-format small{font-size:9px}
.sm4-format h3{max-width:330px;margin-top:11px;font-size:clamp(25px,2vw,30px);line-height:1.04}
.sm4-format p{margin-top:14px;color:#b0aba4;font-size:13px;line-height:1.6}
.sm4-format__copy ul{gap:7px;margin-top:18px}
.sm4-format__copy li{padding:7px 9px;color:#c2bdb6;font-size:9px}

@media(max-width:1100px){
  .sm4-hero:has(.sm4-social-wall) .sm4-hero__grid{min-height:0;grid-template-columns:1fr;gap:44px;padding-bottom:56px}
  .sm4-social-wall{width:min(760px,100%);margin-inline:auto}
}
@media(max-width:980px){
  .sm4-formats__grid{grid-template-columns:1fr}
  .sm4-format,.sm4-format.is-reels,.sm4-format.is-carousel,.sm4-format.is-story{min-height:440px}
}
@media(max-width:767px){
  body:not(.onon-home) .onon-inner.sm4 .sm4-hero h1{max-width:360px;font-size:clamp(36px,10.4vw,42px)!important;line-height:1.02!important}
  .sm4-hero__lead{max-width:360px;font-size:15px}
  .sm4-hero__disciplines li{font-size:9px}
  .sm4-social-wall{min-height:638px;border-radius:16px}
  .sm4-social-wall__head{min-height:58px}
  .sm4-social-wall__head small{font-size:9px}
  .sm4-social-wall__stage{height:580px;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:330px 188px;gap:10px;padding:12px 12px 40px}
  .sm4-social-post--reel{grid-column:1 / -1;grid-row:1}
  .sm4-social-post--carousel{grid-column:1;grid-row:2}
  .sm4-social-post--story{grid-column:2;grid-row:2}
  .sm4-social-post--reel>footer strong{font-size:24px}
  .sm4-social-post--reel>footer p{max-width:230px;font-size:11px}
  .sm4-social-post--reel>footer span{font-size:9px}
  .sm4-social-post--carousel>footer strong,.sm4-social-post--story>footer strong{font-size:13px}
  .sm4-social-post--carousel>footer span,.sm4-social-post--story>footer span{display:none}
  .sm4-social-wall__note{font-size:8px}
  .sm4-formats{padding:78px 0 86px}
  .sm4-formats .sm4-section-head>p:last-child{font-size:14px}
  .sm4-formats__grid{margin-top:40px}
  .sm4-format,.sm4-format.is-reels,.sm4-format.is-carousel,.sm4-format.is-story{min-height:410px;padding:20px;border-radius:14px}
  .sm4-format h3{font-size:25px}
  .sm4-format p{font-size:12px}
  .sm4-format__copy li{font-size:9px}
}
@media(prefers-reduced-motion:reduce){
  .sm4-social-post,.sm4-format,.sm4-format img{transform:none!important;transition:none!important}
}

/* Real Instagram profile reel inside the hero phone. */
.sm4-phone__screen--profiles{position:relative!important;display:block!important;overflow:hidden;background:#080c10}
.sm4-phone__profile-deck{position:absolute;inset:0;background:#080c10}
.sm4-phone__profile-deck figure{position:absolute;inset:0;margin:0;opacity:0;animation:sm4RealProfile 12s ease-in-out infinite}
.sm4-phone__profile-deck figure:nth-child(2){animation-delay:3s}
.sm4-phone__profile-deck figure:nth-child(3){animation-delay:6s}
.sm4-phone__profile-deck figure:nth-child(4){animation-delay:9s}
.sm4-phone__profile-deck img{width:100%;height:100%;display:block;object-fit:cover;object-position:top center;background:#080c10}
.sm4-phone__profile-dots{position:absolute;left:50%;bottom:11px;z-index:5;display:flex;gap:6px;padding:6px 9px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(5,8,10,.72);backdrop-filter:blur(8px);transform:translateX(-50%)}
.sm4-phone__profile-dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.35);animation:sm4RealProfileDot 12s linear infinite}
.sm4-phone__profile-dots i:nth-child(2){animation-delay:3s}.sm4-phone__profile-dots i:nth-child(3){animation-delay:6s}.sm4-phone__profile-dots i:nth-child(4){animation-delay:9s}
.sm4-phone:hover .sm4-phone__profile-deck figure,.sm4-phone:hover .sm4-phone__profile-dots i{animation-play-state:paused}
@keyframes sm4RealProfile{0%,23%{opacity:1;transform:translateX(0)}25%,96%{opacity:0;transform:translateX(-2.5%)}97%,100%{opacity:0;transform:translateX(2.5%)}}
@keyframes sm4RealProfileDot{0%,24%{background:#ff2828;box-shadow:0 0 0 3px rgba(255,40,40,.16)}25%,100%{background:rgba(255,255,255,.35);box-shadow:none}}
@media(prefers-reduced-motion:reduce){.sm4-phone__profile-deck figure,.sm4-phone__profile-dots i{animation:none!important}.sm4-phone__profile-deck figure:first-child{opacity:1}}

/* v8 — reporting that mirrors a real Meta/Instagram review, without invented metrics. */
.sm4-report--meta{
  min-height:0;
  overflow:hidden;
  border:1px solid #353535;
  border-radius:26px;
  background:#101010;
  box-shadow:0 28px 70px rgba(0,0,0,.28);
}
.sm4-report--meta>.sm4-report__top{
  min-height:68px;
  padding:10px 12px 10px 18px;
  border-bottom:1px solid #2b2b2b;
  color:#f2f0ec;
  background:#151515;
  letter-spacing:0;
}
.sm4-report__brand,.sm4-report__brand>span,.sm4-report__scope{display:flex;align-items:center}
.sm4-report__brand{gap:11px}
.sm4-report__brand>i{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  flex:0 0 38px;
  border-radius:12px;
  color:#fff;
  background:var(--sm-red);
  font-size:16px;
}
.sm4-report__brand>span{align-items:flex-start;flex-direction:column;gap:4px}
.sm4-report__brand b{font-size:11px;line-height:1}
.sm4-report__brand small{color:#85817b;font-size:9px;font-weight:650;line-height:1}
.sm4-report__scope{gap:7px}
.sm4-report__scope b,.sm4-report__scope em{
  padding:9px 11px;
  border:1px solid #303030;
  border-radius:999px;
  color:#aba69f;
  background:#111;
  font-size:9px;
  font-style:normal;
  font-weight:750;
  letter-spacing:.06em;
}
.sm4-report__scope b{color:#eeeae5;background:#1d1d1d}
.sm4-report__scope b i{width:6px;height:6px;display:inline-block;margin-right:5px;border-radius:50%;background:#55d89a;box-shadow:0 0 0 4px rgba(85,216,154,.08)}
.sm4-report__body{display:grid;grid-template-columns:minmax(0,1fr) 218px;min-width:0}
.sm4-report__signals{min-width:0;padding:20px;border-right:1px solid #2b2b2b}
.sm4-report__intro{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:14px;color:#85817b;font-size:9px;font-weight:800;letter-spacing:.09em}
.sm4-report__intro b{color:#9b9690;font:inherit}
.sm4-report--meta .sm4-report__kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;border:0}
.sm4-report--meta .sm4-report__kpis article{
  min-height:122px;
  padding:15px;
  border:1px solid #2c2c2c!important;
  border-radius:16px;
  background:#151515;
}
.sm4-report--meta .sm4-report__kpis article>i{position:absolute;top:13px;right:13px;color:var(--sm-red);font-size:12px}
.sm4-report--meta .sm4-report__kpis small{color:#8a857f;font-size:9px}
.sm4-report--meta .sm4-report__kpis strong{margin-top:25px;color:#f1eee9;font-size:15px;line-height:1.1;letter-spacing:-.025em}
.sm4-report--meta .sm4-report__kpis p{margin-top:7px;color:#938e87;font-size:10px;line-height:1.5}
.sm4-report__content{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:8px}
.sm4-report__content article{min-width:0;display:grid;grid-template-columns:48px minmax(0,1fr);gap:10px;align-items:center;padding:8px;border:1px solid #2c2c2c;border-radius:15px;background:#0d0d0d}
.sm4-report__content img{width:48px;height:62px;border-radius:10px;object-fit:cover;filter:saturate(.84) brightness(.82)}
.sm4-report__content div{min-width:0}.sm4-report__content small,.sm4-report__content strong,.sm4-report__content p{display:block}
.sm4-report__content small{color:var(--sm-red);font-size:8px;font-weight:850;letter-spacing:.07em}
.sm4-report__content strong{margin-top:5px;color:#e9e5df;font-size:10px;line-height:1.2}
.sm4-report__content p{margin-top:5px;color:#8a857f;font-size:9px;line-height:1.45}
.sm4-report__decision{display:flex;flex-direction:column;padding:21px 18px;background:#0b0b0b}
.sm4-report__decision-label{color:var(--sm-red);font-size:9px;font-weight:850;letter-spacing:.09em}
.sm4-report__decision-label i{margin-right:6px}
.sm4-report__decision h3{margin:20px 0 0;color:#f2efea;font-size:19px;line-height:1.08;letter-spacing:-.04em}
.sm4-report__decision ol{display:grid;gap:0;padding:0;margin:23px 0 0;list-style:none;border-top:1px solid #292929}
.sm4-report__decision li{display:grid;grid-template-columns:25px 1fr;gap:9px;padding:14px 0;border-bottom:1px solid #292929}
.sm4-report__decision li>span{color:var(--sm-red);font-size:8px;font-weight:850}
.sm4-report__decision li b,.sm4-report__decision li small{display:block}
.sm4-report__decision li b{color:#dcd8d2;font-size:10px}.sm4-report__decision li small{margin-top:4px;color:#8a857f;font-size:9px;line-height:1.45}
.sm4-report__decision-note{display:flex;align-items:center;gap:10px;margin-top:auto;padding:12px;border:1px solid #303030;border-radius:14px;background:#151515}
.sm4-report__decision-note>i{color:#55d89a;font-size:13px}
.sm4-report__decision-note b,.sm4-report__decision-note small{display:block}.sm4-report__decision-note b{color:#dedad4;font-size:9px}.sm4-report__decision-note small{margin-top:3px;color:#8a857f;font-size:8px}
.sm4-report--meta>.sm4-report__summary{min-height:64px;align-items:center;padding:12px 20px;border-top:1px solid #2b2b2b!important;color:#77726c;background:#131313}
.sm4-report__summary p{max-width:520px!important;color:#aaa59e!important;font-size:10px!important;line-height:1.55!important;text-align:right}

/* The closing moment stays neutral; real work carries the colour. */
.sm4-final--neutral{padding:104px 0;background:#090909;color:#111}
.sm4-final__frame{display:grid;grid-template-columns:minmax(0,1fr) minmax(390px,.78fr);overflow:hidden;border:1px solid #2b2b2b;border-radius:34px;background:var(--sm-paper);box-shadow:0 35px 85px rgba(0,0,0,.32)}
.sm4-final__copy{align-self:center;padding:clamp(46px,6vw,84px)}
.sm4-final--neutral .sm4-label{color:#25221f}
body:not(.onon-home) .onon-inner.sm4 .sm4-final--neutral h2{max-width:680px;margin-top:26px;color:#111;font-size:clamp(34px,4vw,54px)!important}
.sm4-final--neutral h2 strong{color:var(--sm-red)}
.sm4-final--neutral .sm4-final__copy>p:not(.sm4-label){max-width:570px;margin-top:25px;color:#6e6963;font-size:13px;line-height:1.72}
.sm4-final__mosaic{min-height:580px;display:grid;grid-template-columns:1.08fr .92fr;grid-template-rows:repeat(2,minmax(0,1fr));gap:10px;padding:12px;background:#111}
.sm4-final__mosaic figure{position:relative;min-width:0;min-height:0;overflow:hidden;margin:0;border:1px solid #343434;border-radius:20px;background:#1a1a1a}
.sm4-final__mosaic figure.is-main{grid-row:1 / 3}
.sm4-final__mosaic img{width:100%;height:100%;object-fit:cover;filter:saturate(.86) brightness(.74);transition:transform .8s var(--sm-ease),filter .5s ease}
.sm4-final__mosaic figure::after{position:absolute;inset:35% 0 0;content:"";background:linear-gradient(transparent,rgba(3,3,3,.92))}
.sm4-final__mosaic figcaption{position:absolute;right:14px;bottom:14px;left:14px;z-index:1;color:#fff}
.sm4-final__mosaic figcaption span,.sm4-final__mosaic figcaption b{display:block}.sm4-final__mosaic figcaption span{color:var(--sm-red);font-size:8px;font-weight:850;letter-spacing:.1em}.sm4-final__mosaic figcaption b{margin-top:5px;font-size:11px;line-height:1.2}
.sm4-final__mosaic figure.is-main figcaption b{font-size:16px}
@media(hover:hover){.sm4-final__mosaic figure:hover img{filter:saturate(.98) brightness(.84);transform:scale(1.025)}}

@media(max-width:1100px){
  .sm4-report__body{grid-template-columns:minmax(0,1fr) 240px}
  .sm4-final__frame{grid-template-columns:1fr}
  .sm4-final__mosaic{min-height:520px}
}
@media(max-width:767px){
  .sm4-measure{padding:78px 0}
  .sm4-report--meta{border-radius:20px}
  .sm4-report--meta>.sm4-report__top{align-items:flex-start;flex-direction:column;gap:12px;padding:15px}
  .sm4-report__scope{width:100%;justify-content:space-between}.sm4-report__scope em{display:none}
  .sm4-report__body{grid-template-columns:1fr}
  .sm4-report__signals{padding:14px;border-right:0;border-bottom:1px solid #2b2b2b}
  .sm4-report__intro{align-items:flex-start;flex-direction:column;gap:5px}
  .sm4-report--meta .sm4-report__kpis{grid-template-columns:1fr}
  .sm4-report--meta .sm4-report__kpis article{min-height:112px}
  .sm4-report--meta .sm4-report__kpis strong{font-size:16px}
  .sm4-report--meta .sm4-report__kpis p{font-size:9px}
  .sm4-report__content{grid-template-columns:1fr}
  .sm4-report__content article{grid-template-columns:58px minmax(0,1fr)}.sm4-report__content img{width:58px;height:70px}.sm4-report__content strong{font-size:10px}.sm4-report__content p{font-size:8px}
  .sm4-report__decision{min-height:365px;padding:21px 18px}
  .sm4-report__decision h3{max-width:260px;font-size:22px}
  .sm4-report--meta>.sm4-report__summary{align-items:flex-start;flex-direction:column;gap:8px;min-height:0;padding:16px}.sm4-report__summary p{text-align:left}
  .sm4-final--neutral{padding:78px 0}
  .sm4-final__frame{border-radius:22px}
  .sm4-final__copy{padding:38px 23px 42px}
  body:not(.onon-home) .onon-inner.sm4 .sm4-final--neutral h2{max-width:310px;font-size:31px!important}
  .sm4-final--neutral .sm4-final__copy>p:not(.sm4-label){font-size:12px}
  .sm4-final__mosaic{min-height:390px;gap:7px;padding:8px}.sm4-final__mosaic figure{border-radius:14px}.sm4-final__mosaic figcaption{right:10px;bottom:10px;left:10px}.sm4-final__mosaic figure.is-main figcaption b{font-size:13px}.sm4-final__mosaic figcaption b{font-size:9px}
}
@media(prefers-reduced-motion:reduce){.sm4-final__mosaic img{transition:none!important}}

/* Critical labels stay legible at both desktop and mobile sizes. */
.sm4-social-wall__head small,
.sm4-social-post > header,
.sm4-social-post > footer span,
.sm4-social-wall__result small,
.sm4-social-wall__note,
.sm4-story__triggers li,
.sm4-story__stage-head,
.sm4-story__data header,
.sm4-story__mini small,
.sm4-story__data footer,
.sm4-story__tags span,
.sm4-format__top,
.sm4-format small,
.sm4-format__copy li { font-size:8px; }
.sm4-social-wall__note { line-height:1.45; }
.sm4-story__data header,
.sm4-story__data footer,
.sm4-format__top { letter-spacing:.09em; }

/* v11 — fictional campaign proof, rounded story flow and a truthful Meta Ads review. */
.sm4-social-wall { border-radius: 24px; }
.sm4-social-wall__identity {
  display: flex !important;
  align-items: center;
  gap: 10px;
  color: #f2f0ec;
}
.sm4-social-wall__identity > i {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  border-radius: 12px;
  color: #fff;
  background: var(--sm-red);
  font-size: 15px;
}
.sm4-social-post,
.sm4-social-post--reel,
.sm4-social-post--carousel,
.sm4-social-post--story { border-radius: 18px; }
.sm4-social-wall__head small { font-size: 11px; line-height: 1.35; }
.sm4-social-post > header { font-size: 11px; }
.sm4-social-post > footer span { font-size: 11px; }
.sm4-social-post--reel > footer small { font-size: 11px; }
.sm4-social-wall__note { font-size: 11px; line-height: 1.5; }

.sm4-story__triggers li { display: block; }
.sm4-story__triggers button {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 0;
  border: 0;
  color: #7f7b76;
  background: transparent;
  font: inherit;
  font-size: 11px;
  letter-spacing: inherit;
  cursor: pointer;
}
.sm4-story__triggers button:focus-visible {
  outline: 2px solid var(--sm-red);
  outline-offset: 7px;
  border-radius: 4px;
}
.sm4-story__stage {
  overflow: hidden;
  border-color: #343434;
  border-radius: 30px;
  background:
    radial-gradient(circle at 92% 12%, rgba(255,40,40,.1), transparent 29%),
    #0c0c0c;
  box-shadow: 0 30px 72px rgba(0,0,0,.34);
}
.sm4-story__stage-head {
  height: 58px;
  padding-inline: 24px;
  color: #9b9690;
  background: rgba(255,255,255,.018);
  font-size: 11px;
}
.sm4-story__content { min-height: 448px; }
.sm4-story__copy { padding: 40px; }
.sm4-story__copy > p { max-width: 340px; color: #aaa59e; font-size: 14px; line-height: 1.72; }
.sm4-story__tags span {
  padding: 8px 11px;
  border-radius: 999px;
  color: #aaa59e;
  background: #121212;
  font-size: 11px;
}
.sm4-story__data { padding: 32px 32px 0; }
.sm4-story__data header { color: #8d8882; font-size: 11px; }
.sm4-story__data header b { color: #78dfa9; }
.sm4-story__data > strong { margin-top: 30px; font-size: clamp(24px,2.1vw,32px); }
.sm4-story__mini {
  gap: 8px;
  border: 0;
}
.sm4-story__mini span {
  min-height: 72px;
  padding: 14px;
  border: 1px solid #303030;
  border-radius: 14px;
  background: rgba(255,255,255,.018);
}
.sm4-story__mini small { color: #817c76; font-size: 11px; }
.sm4-story__mini b { color: #ddd8d1; font-size: 13px; line-height: 1.35; }
.sm4-story__data .sm4-story__signal {
  position: relative;
  height: 82px;
  align-items: center;
  gap: 0;
  opacity: 1;
}
.sm4-story__data .sm4-story__signal::before {
  position: absolute;
  right: 6px;
  left: 6px;
  height: 1px;
  content: "";
  background: #383838;
}
.sm4-story__data .sm4-story__signal i,
.sm4-story__data .sm4-story__signal i:nth-child(n) {
  position: relative;
  z-index: 1;
  width: 11px;
  height: 11px !important;
  flex: 0 0 11px;
  margin-right: auto;
  border: 3px solid #0c0c0c;
  border-radius: 50%;
  background: #5f5a54;
  animation: none;
}
.sm4-story__data .sm4-story__signal i:last-child { margin-right: 0; }
.sm4-story__data .sm4-story__signal i:nth-child(4) {
  width: 16px;
  height: 16px !important;
  flex-basis: 16px;
  background: var(--sm-red);
  box-shadow: 0 0 0 7px rgba(255,40,40,.1);
  animation: sm4FlowPulse 1.8s ease-in-out infinite;
}
.sm4-story__data footer { height: 42px; color: #827d77; font-size: 11px; }
@keyframes sm4FlowPulse { 50% { box-shadow: 0 0 0 12px rgba(255,40,40,0); } }

.sm4-format,
.sm4-format.is-reels,
.sm4-format.is-carousel,
.sm4-format.is-story { border-radius: 22px; }
.sm4-format__top { font-size: 12px; }
.sm4-format small { font-size: 11px; }
.sm4-format p { font-size: 14px; }
.sm4-format__copy li { font-size: 11px; }
.sm4-final__mosaic figcaption span { font-size: 11px; }
.sm4-final__mosaic figcaption b { font-size: 13px; }
.sm4-final__mosaic figure.is-main figcaption b { font-size: 17px; }
.sm4-final--neutral .sm4-final__copy > p:not(.sm4-label) { font-size: 15px; }

.sm4-ads {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #353535;
  border-radius: 28px;
  color: #f2f0ec;
  background: #101010;
  box-shadow: 0 28px 70px rgba(0,0,0,.28);
}
.sm4-ads__top,
.sm4-ads__brand,
.sm4-ads__brand > span,
.sm4-ads__sample,
.sm4-ads__campaign-head,
.sm4-ads__note { display: flex; align-items: center; }
.sm4-ads__top {
  min-height: 72px;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 16px 12px 20px;
  border-bottom: 1px solid #2b2b2b;
  background: #151515;
}
.sm4-ads__brand { gap: 12px; }
.sm4-ads__brand > i {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  border-radius: 13px;
  color: #fff;
  background: var(--sm-red);
  font-size: 16px;
}
.sm4-ads__brand > span { align-items: flex-start; flex-direction: column; gap: 4px; }
.sm4-ads__brand b { font-size: 13px; line-height: 1; }
.sm4-ads__brand small { color: #9b9690; font-size: 12px; line-height: 1.2; }
.sm4-ads__sample {
  gap: 7px;
  padding: 9px 12px;
  border: 1px solid #383838;
  border-radius: 999px;
  color: #c5c0b9;
  background: #101010;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}
.sm4-ads__sample i { width: 7px; height: 7px; border-radius: 50%; background: #e8b65b; }
.sm4-ads__body { display: grid; grid-template-columns: minmax(0,1fr) 248px; min-width: 0; }
.sm4-ads__workspace { min-width: 0; padding: 22px; border-right: 1px solid #2b2b2b; }
.sm4-ads__campaign-head { justify-content: space-between; gap: 18px; }
.sm4-ads__campaign-head > span { min-width: 0; }
.sm4-ads__campaign-head small,
.sm4-ads__campaign-head strong { display: block; }
.sm4-ads__campaign-head small { color: #8f8a84; font-size: 11px; font-weight: 800; letter-spacing: .09em; }
.sm4-ads__campaign-head strong { margin-top: 7px; font-size: 19px; line-height: 1.15; letter-spacing: -.025em; }
.sm4-ads__campaign-head em,
.sm4-ads__levels > li > em {
  padding: 7px 9px;
  border: 1px solid #44403a;
  border-radius: 999px;
  color: #d1c7b5;
  background: #1b1916;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}
.sm4-ads__facts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 20px 0 0; border: 1px solid #303030; border-radius: 16px; overflow: hidden; }
.sm4-ads__facts > div { min-width: 0; padding: 13px; border-right: 1px solid #303030; background: #141414; }
.sm4-ads__facts > div:last-child { border-right: 0; }
.sm4-ads__facts dt { color: #89847e; font-size: 11px; font-weight: 750; }
.sm4-ads__facts dd { margin: 6px 0 0; color: #e2ded8; font-size: 13px; line-height: 1.35; }
.sm4-ads__levels { display: grid; gap: 8px; padding: 0; margin: 18px 0 0; list-style: none; }
.sm4-ads__levels > li {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 84px;
  padding: 12px;
  border: 1px solid #2d2d2d;
  border-radius: 17px;
  background: #131313;
}
.sm4-ads__level-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: #ded9d2; background: #202020; font-size: 14px; }
.sm4-ads__levels small,
.sm4-ads__levels b,
.sm4-ads__levels p { display: block; }
.sm4-ads__levels small { color: #817c76; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.sm4-ads__levels b { margin-top: 4px; color: #ece8e2; font-size: 13px; line-height: 1.25; }
.sm4-ads__levels p { margin-top: 5px; color: #9b9690; font-size: 12px; line-height: 1.45; }
.sm4-ads__levels > li > em.is-review { color: #d3b276; }
.sm4-ads__levels > li > em.is-ready { color: #78dfa9; border-color: #315b45; background: #12241b; }
.sm4-ads__thumbs { display: flex; gap: 5px; margin-top: 8px; }
.sm4-ads__thumbs img { width: 32px; height: 38px; border: 1px solid #3c3c3c; border-radius: 8px; object-fit: cover; }
.sm4-ads__review { display: flex; flex-direction: column; padding: 24px 20px; background: #0a0a0a; }
.sm4-ads__review-label { color: var(--sm-red); font-size: 11px; font-weight: 850; letter-spacing: .08em; }
.sm4-ads__review h3 { margin: 20px 0 0; color: #f2efea; font-size: 22px; line-height: 1.08; letter-spacing: -.035em; }
.sm4-ads__review > p { margin-top: 13px; color: #96918b; font-size: 12px; line-height: 1.55; }
.sm4-ads__review ul { display: grid; gap: 0; padding: 0; margin: 20px 0 0; list-style: none; border-top: 1px solid #292929; }
.sm4-ads__review li { display: grid; grid-template-columns: 24px 1fr; gap: 9px; padding: 13px 0; border-bottom: 1px solid #292929; }
.sm4-ads__review li > i { width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; color: #06130d; background: #69dda2; font-size: 8px; }
.sm4-ads__review li b,
.sm4-ads__review li small { display: block; }
.sm4-ads__review li b { color: #ddd8d2; font-size: 12px; }
.sm4-ads__review li small { margin-top: 4px; color: #8d8882; font-size: 11px; line-height: 1.4; }
.sm4-ads__action { position: relative; margin-top: auto; padding: 14px 44px 14px 14px; border: 1px solid #363636; border-radius: 16px; background: #171717; }
.sm4-ads__action small,
.sm4-ads__action b { display: block; }
.sm4-ads__action small { color: var(--sm-red); font-size: 11px; font-weight: 850; letter-spacing: .08em; }
.sm4-ads__action b { margin-top: 6px; color: #e7e2dc; font-size: 12px; line-height: 1.4; }
.sm4-ads__action > span { position: absolute; top: 50%; right: 12px; width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; color: #111; background: #f2f0ec; transform: translateY(-50%); font-size: 9px; }
.sm4-ads__note { gap: 9px; min-height: 58px; padding: 12px 20px; border-top: 1px solid #2b2b2b; color: #918c86; background: #131313; }
.sm4-ads__note i { color: #b5b0aa; font-size: 12px; }
.sm4-ads__note p { margin: 0; font-size: 11px; line-height: 1.5; }

@media (max-width: 1180px) {
  .sm4-ads__body { grid-template-columns: 1fr; }
  .sm4-ads__workspace { border-right: 0; border-bottom: 1px solid #2b2b2b; }
  .sm4-ads__review { min-height: 460px; }
}

@media (max-width: 767px) {
  .sm4-social-wall { border-radius: 20px; }
  .sm4-social-wall__identity { gap: 8px; }
  .sm4-social-wall__identity > i { width: 32px; height: 32px; flex-basis: 32px; border-radius: 10px; font-size: 13px; }
  .sm4-social-wall__head small { font-size: 11px; }
  .sm4-social-post > header { font-size: 11px; }
  .sm4-social-post > footer span { font-size: 11px; }
  .sm4-social-post--reel > footer small { font-size: 11px; }

  .sm4-story { height: auto; overflow: visible; }
  .sm4-story__sticky { position: relative; top: auto; min-height: 0; overflow: visible; }
  .sm4-story__layout { min-height: 0; align-content: start; gap: 34px; padding-block: 78px; }
  .sm4-story__triggers { flex-wrap: wrap; gap: 10px; }
  .sm4-story__triggers button { gap: 7px; min-height: 36px; font-size: 11px; }
  .sm4-story__triggers i { width: 20px; }
  .sm4-story__triggers i.is-active { width: 30px; }
  .sm4-story__stage { min-height: 0; border-radius: 22px; }
  .sm4-story__stage-head { height: 52px; padding-inline: 17px; font-size: 11px; }
  .sm4-story__content { min-height: 0; }
  .sm4-story__copy { padding: 27px 23px; }
  .sm4-story__copy > p { font-size: 13px; }
  .sm4-story__tags span { font-size: 11px; }
  .sm4-story__data { min-height: 286px; padding: 24px 23px 0; }
  .sm4-story__data header { font-size: 11px; }
  .sm4-story__data > strong { font-size: 23px; }
  .sm4-story__mini span { min-height: 68px; }
  .sm4-story__mini small { font-size: 11px; }
  .sm4-story__mini b { font-size: 12px; }
  .sm4-story__data .sm4-story__signal { position: relative; right: auto; bottom: auto; left: auto; height: 64px; opacity: 1; }
  .sm4-story__data footer { font-size: 11px; }

  .sm4-format p { font-size: 13px; }
  .sm4-format__top { font-size: 11px; }
  .sm4-format small,
  .sm4-format__copy li { font-size: 11px; }
  .sm4-final__mosaic figcaption span { font-size: 11px; }
  .sm4-final__mosaic figcaption b { font-size: 12px; }
  .sm4-final__mosaic figure.is-main figcaption b { font-size: 15px; }
  .sm4-final--neutral .sm4-final__copy > p:not(.sm4-label) { font-size: 14px; }

  .sm4-ads { border-radius: 21px; }
  .sm4-ads__top { align-items: flex-start; flex-direction: column; padding: 15px; }
  .sm4-ads__sample { font-size: 11px; }
  .sm4-ads__workspace { padding: 15px; }
  .sm4-ads__campaign-head { align-items: flex-start; flex-direction: column; }
  .sm4-ads__campaign-head strong { font-size: 18px; }
  .sm4-ads__facts { grid-template-columns: 1fr; }
  .sm4-ads__facts > div { border-right: 0; border-bottom: 1px solid #303030; }
  .sm4-ads__facts > div:last-child { border-bottom: 0; }
  .sm4-ads__levels > li { grid-template-columns: 38px minmax(0,1fr); align-items: start; }
  .sm4-ads__level-icon { width: 38px; height: 38px; }
  .sm4-ads__levels > li > em { grid-column: 2; justify-self: start; }
  .sm4-ads__levels p { font-size: 12px; }
  .sm4-ads__review { min-height: 500px; padding: 23px 18px; }
  .sm4-ads__review h3 { font-size: 23px; }
  .sm4-ads__review > p { font-size: 12px; }
  .sm4-ads__note { align-items: flex-start; padding: 15px; }
  .sm4-ads__note p { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .sm4-story__data .sm4-story__signal i:nth-child(4) { animation: none; }
}

/* v12 — phone-native fictional profile/feed hero. */
.sm4-hero:has(.sm4-phone-scene) .sm4-hero__grid {
  min-height: 790px;
  grid-template-columns: minmax(400px,.9fr) minmax(460px,1.1fr);
  align-items: center;
  gap: clamp(42px,5vw,82px);
  padding-block: 28px 72px;
}
.sm4-phone-scene,
.sm4-phone-scene * { box-sizing: border-box; }
.sm4-phone-scene {
  position: relative;
  min-width: 0;
  min-height: 760px;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: visible;
}
.sm4-phone-scene__halo {
  position: absolute;
  z-index: -2;
  width: min(590px,100%);
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,40,40,.14), transparent 38%),
    repeating-radial-gradient(circle, transparent 0 41px, rgba(255,255,255,.028) 42px 43px);
  animation: sm4PhoneHalo 8s ease-in-out infinite alternate;
}
.sm4-phone-scene__flag {
  position: absolute;
  top: 56px;
  left: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #9c9790;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .1em;
}
.sm4-phone-scene__flag i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sm-red);
  box-shadow: 0 0 0 6px rgba(255,40,40,.09);
}
.sm4-phone {
  position: relative;
  width: min(410px,82%);
  aspect-ratio: 9 / 17.15;
  padding: 10px;
  border: 1px solid #484848;
  border-radius: 53px;
  background: linear-gradient(145deg,#3f3f3f 0%,#111 16%,#080808 74%,#333 100%);
  box-shadow:
    0 48px 90px rgba(0,0,0,.48),
    0 0 0 7px rgba(255,255,255,.025),
    inset 0 1px 0 rgba(255,255,255,.18);
}
.sm4-phone::before,
.sm4-phone::after {
  position: absolute;
  left: -4px;
  width: 3px;
  content: "";
  border-radius: 3px 0 0 3px;
  background: #3d3d3d;
}
.sm4-phone::before { top: 118px; height: 66px; }
.sm4-phone::after { top: 200px; height: 98px; }
.sm4-phone__speaker {
  position: absolute;
  top: 18px;
  left: 50%;
  z-index: 8;
  width: 100px;
  height: 25px;
  border-radius: 999px;
  background: #020202;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.08);
  transform: translateX(-50%);
}
.sm4-phone__screen {
  height: 100%;
  display: grid;
  grid-template-rows: 50px auto 84px 40px minmax(0,1fr) 50px;
  overflow: hidden;
  border: 1px solid #24282d;
  border-radius: 44px;
  color: #f6f7f8;
  background: #0d1115;
}
.sm4-phone__topbar {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) auto;
  align-items: end;
  gap: 8px;
  padding: 0 15px 9px;
  border-bottom: 1px solid #22272d;
  font-size: 12px;
}
.sm4-phone__topbar > i { color: #dfe2e5; font-size: 13px; }
.sm4-phone__topbar > strong { overflow: hidden; font-size: 12px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.sm4-phone__topbar > strong i { margin-left: 3px; font-size: 8px; }
.sm4-phone__topbar > span { display: flex; align-items: center; gap: 13px; color: #dfe2e5; font-size: 14px; }

.sm4-phone__profile { position: relative; padding: 13px 14px 12px; border-bottom: 1px solid #20252a; background: #0d1115; }
.sm4-phone__identity { display: flex; align-items: center; gap: 10px; }
.sm4-phone__avatar {
  position: relative;
  width: 64px;
  height: 64px;
  display: block;
  flex: 0 0 64px;
  padding: 3px;
  border-radius: 50%;
  background: conic-gradient(from 20deg,var(--sm-red),#e7b35d 34%,#f0ede7 57%,var(--sm-red));
}
.sm4-phone__avatar::after {
  position: absolute;
  right: -1px;
  bottom: 2px;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  content: "+";
  border: 2px solid #0d1115;
  border-radius: 50%;
  color: #fff;
  background: #3977f6;
  font-size: 10px;
  font-weight: 800;
}
.sm4-phone__avatar img { width: 100%; height: 100%; display: block; border: 2px solid #0d1115; border-radius: 50%; object-fit: cover; object-position: center 42%; }
.sm4-phone__identity > div { min-width: 0; }
.sm4-phone__identity strong,
.sm4-phone__identity small { display: block; }
.sm4-phone__identity strong { font-size: 14px; line-height: 1.2; }
.sm4-phone__identity small { margin-top: 4px; color: #a5abb1; font-size: 11px; line-height: 1.25; }
.sm4-phone__profile-tags {
  position: absolute;
  top: 22px;
  right: 14px;
  width: 190px;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  margin: 0;
}
.sm4-phone__profile-tags > div { min-width: 0; text-align: center; }
.sm4-phone__profile-tags dt { color: #8f969e; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.sm4-phone__profile-tags dd { overflow: hidden; margin: 4px 0 0; color: #f1f3f5; font-size: 11px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.sm4-phone__profile > p { margin: 10px 0 0; color: #e4e6e8; font-size: 11px; line-height: 1.45; }
.sm4-phone__profile > p span { color: #8e969e; }
.sm4-phone__profile-actions { display: grid; grid-template-columns: 1.1fr .9fr 32px; gap: 6px; margin-top: 9px; }
.sm4-phone__profile-actions span,
.sm4-phone__profile-actions > i {
  min-height: 29px;
  display: grid;
  place-items: center;
  border: 1px solid #30363d;
  border-radius: 8px;
  color: #edf0f2;
  background: #242a30;
  font-size: 11px;
  font-weight: 750;
}
.sm4-phone__profile-actions span:first-child { border-color: #3977f6; background: #3977f6; }

.sm4-phone__stories {
  display: flex;
  align-items: center;
  gap: 13px;
  overflow: hidden;
  padding: 8px 14px 7px;
  border-bottom: 1px solid #20252a;
}
.sm4-phone__stories > span { min-width: 54px; display: grid; justify-items: center; gap: 5px; }
.sm4-phone__stories > span > i {
  position: relative;
  width: 49px;
  height: 49px;
  display: grid;
  place-items: center;
  padding: 3px;
  border: 1px solid #495058;
  border-radius: 50%;
  background: #14191e;
  font-style: normal;
}
.sm4-phone__stories > span.is-live > i { border-color: var(--sm-red); animation: sm4PhoneStory 2.2s ease-in-out infinite; }
.sm4-phone__stories img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.sm4-phone__stories small { color: #c6cbd0; font-size: 10px; line-height: 1; }
.sm4-phone__story-mark { color: #f2f0ec; background: #183226 !important; font-size: 11px; font-weight: 850; }

.sm4-phone__tabs { display: grid; grid-template-columns: repeat(4,1fr); align-items: stretch; border-bottom: 1px solid #20252a; color: #777e86; }
.sm4-phone__tabs > span { position: relative; display: grid; place-items: center; font-size: 14px; }
.sm4-phone__tabs > span.is-active { color: #f0f2f4; }
.sm4-phone__tabs > span.is-active::after { position: absolute; right: 16px; bottom: 0; left: 16px; height: 2px; content: ""; background: #f0f2f4; }

.sm4-phone__feed {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  grid-template-rows: repeat(3,minmax(0,1fr));
  grid-auto-flow: row dense;
  gap: 2px;
  overflow: hidden;
  background: #050607;
}
.sm4-phone__feed button {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #fff;
  background: #161a1e;
  cursor: pointer;
  isolation: isolate;
}
.sm4-phone__feed button::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  content: "";
  pointer-events: none;
  border: 0 solid var(--sm-red);
  box-shadow: inset 0 0 0 0 rgba(255,40,40,0);
  transition: border-width .35s ease, box-shadow .35s ease, background .35s ease;
}
.sm4-phone__feed button > img { width: 100%; height: 100%; display: block; object-fit: cover; filter: saturate(.84) brightness(.86); transition: transform .8s var(--sm-ease),filter .5s ease; }
.sm4-phone__feed button.is-crop-high > img { object-position: center 22%; }
.sm4-phone__feed button.is-crop-low > img { object-position: center 74%; }
.sm4-phone__feed button.is-crop-side > img { object-position: 72% center; }
.sm4-phone__feed button > i { position: absolute; top: 7px; right: 7px; z-index: 3; color: rgba(255,255,255,.94); font-size: 10px; text-shadow: 0 1px 4px #000; }
.sm4-phone__feed button > span {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  padding: 18px 8px 8px;
  opacity: 0;
  background: linear-gradient(transparent,rgba(0,0,0,.88));
  transform: translateY(7px);
  transition: opacity .35s ease,transform .35s var(--sm-ease);
}
.sm4-phone__feed button > span small,
.sm4-phone__feed button > span b { display: block; text-align: left; }
.sm4-phone__feed button > span small { color: #ff7777; font-size: 9px; font-weight: 850; letter-spacing: .08em; }
.sm4-phone__feed button > span b { margin-top: 3px; overflow: hidden; font-size: 11px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.sm4-phone__feed button.is-active::after { border-width: 2px; box-shadow: inset 0 0 26px rgba(255,40,40,.15); }
.sm4-phone__feed button.is-active > img { filter: saturate(1) brightness(.96); transform: scale(1.07); }
.sm4-phone__feed button.is-active > span { opacity: 1; transform: none; }
.sm4-phone__feed button:focus-visible { z-index: 5; outline: 3px solid #fff; outline-offset: -3px; }

.sm4-phone__dock {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  place-items: center;
  border-top: 1px solid #252a30;
  color: #e8ebee;
  background: #0c1014;
  font-size: 15px;
}
.sm4-phone__dock-avatar { width: 23px; height: 23px; display: grid; place-items: center; border: 1px solid #69717a; border-radius: 50%; color: #e9ecef; background: #193426; font-size: 7px; font-weight: 850; }
.sm4-phone-scene__note {
  position: absolute;
  right: 0;
  bottom: 75px;
  z-index: 7;
  min-width: 225px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 15px;
  margin: 0;
  border: 1px solid #393939;
  border-radius: 17px;
  color: #f2f0ec;
  background: rgba(16,16,16,.94);
  box-shadow: 0 18px 42px rgba(0,0,0,.34);
  backdrop-filter: blur(12px);
}
.sm4-phone-scene__note > i { width: 31px; height: 31px; display: grid; place-items: center; flex: 0 0 31px; border-radius: 10px; color: #0d1115; background: #68dda2; font-size: 12px; }
.sm4-phone-scene__note b,
.sm4-phone-scene__note small { display: block; }
.sm4-phone-scene__note b { font-size: 11px; }
.sm4-phone-scene__note small { margin-top: 4px; color: #abb0b1; font-size: 10px; line-height: 1.35; }

/* Real profile captures use a taller screen ratio than the former mock UI. */
.sm4-phone:has(.sm4-phone__screen--profiles) {
  width: min(350px,76%);
  aspect-ratio: 327 / 715;
  padding: 8px;
}
.sm4-phone:has(.sm4-phone__screen--profiles) .sm4-phone__screen { border-radius: 43px; }
.sm4-phone-scene:has(.sm4-phone__screen--profiles) .sm4-phone-scene__note { display: none; }
@keyframes sm4PhoneStory {
  50% { border-color: #f4b45e; box-shadow: 0 0 0 6px rgba(255,40,40,.08); transform: translateY(-2px); }
}
@keyframes sm4PhoneHalo {
  to { opacity: .72; transform: scale(1.035) rotate(2deg); }
}

@media (max-width: 1180px) {
  .sm4-hero:has(.sm4-phone-scene) .sm4-hero__grid { grid-template-columns: minmax(360px,.84fr) minmax(430px,1.16fr); gap: 36px; }
  .sm4-phone { width: min(390px,88%); }
  .sm4-phone-scene__note { right: -8px; }
}

@media (max-width: 1100px) {
  .sm4-hero:has(.sm4-phone-scene) .sm4-hero__grid { min-height: 0; grid-template-columns: 1fr; gap: 26px; padding-bottom: 78px; }
  .sm4-phone-scene { width: min(720px,100%); min-height: 760px; margin-inline: auto; }
  .sm4-phone { width: min(400px,75%); }
  .sm4-phone-scene__flag { left: 9%; }
  .sm4-phone-scene__note { right: 8%; }
}

@media (max-width: 767px) {
  .sm4-hero:has(.sm4-phone-scene) .sm4-hero__grid { gap: 18px; padding-block: 0 72px; }
  .sm4-phone-scene { min-height: 0; padding: 46px 0 0; overflow: hidden; }
  .sm4-phone-scene__halo { width: 520px; max-width: none; }
  .sm4-phone-scene__flag { top: 10px; left: 50%; width: max-content; font-size: 9px; transform: translateX(-50%); }
  .sm4-phone {
    width: min(350px,calc(100% - 18px));
    aspect-ratio: 9 / 16.55;
    padding: 8px;
    border-radius: 45px;
  }
  .sm4-phone__speaker { top: 14px; width: 84px; height: 21px; }
  .sm4-phone__screen { grid-template-rows: 44px auto 70px 36px minmax(0,1fr) 44px; border-radius: 37px; }
  .sm4-phone__topbar { grid-template-columns: 28px minmax(0,1fr) auto; padding: 0 12px 7px; font-size: 11px; }
  .sm4-phone__topbar > strong { font-size: 11px; }
  .sm4-phone__topbar > span { gap: 10px; font-size: 12px; }
  .sm4-phone__profile { padding: 10px 11px; }
  .sm4-phone__avatar { width: 54px; height: 54px; flex-basis: 54px; }
  .sm4-phone__identity strong { font-size: 12px; }
  .sm4-phone__identity > div { width: 68px; }
  .sm4-phone__identity small { display: none; }
  .sm4-phone__profile-tags { top: 16px; right: 11px; width: 176px; }
  .sm4-phone__profile-tags dt { font-size: 9px; }
  .sm4-phone__profile-tags dd { font-size: 10px; }
  .sm4-phone__profile > p { margin-top: 8px; font-size: 10px; line-height: 1.35; }
  .sm4-phone__profile-actions { grid-template-columns: 1.1fr .9fr 29px; gap: 5px; margin-top: 7px; }
  .sm4-phone__profile-actions span,
  .sm4-phone__profile-actions > i { min-height: 27px; font-size: 10px; }
  .sm4-phone__stories { gap: 10px; padding: 6px 11px; }
  .sm4-phone__stories > span { min-width: 49px; gap: 4px; }
  .sm4-phone__stories > span > i { width: 43px; height: 43px; }
  .sm4-phone__stories small { font-size: 10px; }
  .sm4-phone__tabs > span { font-size: 12px; }
  .sm4-phone__feed button > span { padding: 15px 6px 6px; }
  .sm4-phone__feed button > span b { font-size: 10px; }
  .sm4-phone__feed button > i { top: 6px; right: 6px; font-size: 9px; }
  .sm4-phone__dock { font-size: 13px; }
  .sm4-phone-scene__note {
    position: relative;
    right: auto;
    bottom: auto;
    width: min(350px,calc(100% - 18px));
    min-width: 0;
    margin: 16px auto 0;
    border-radius: 15px;
  }
  .sm4-phone-scene__note b { font-size: 11px; }
  .sm4-phone-scene__note small { font-size: 10px; }
  .sm4-phone:has(.sm4-phone__screen--profiles) {
    width: min(318px,calc(100% - 26px));
    aspect-ratio: 327 / 715;
  }
}

@media (max-width: 380px) {
  .sm4-phone { width: min(328px,calc(100% - 12px)); }
  .sm4-phone__stories { gap: 6px; }
  .sm4-phone__stories > span { min-width: 47px; }
  .sm4-phone__profile-tags { width: 156px; }
}

@media (prefers-reduced-motion: reduce) {
  .sm4-phone-scene__halo,
  .sm4-phone__stories > span.is-live > i { animation: none !important; }
  .sm4-phone__feed button,
  .sm4-phone__feed button::after,
  .sm4-phone__feed button > img,
  .sm4-phone__feed button > span { transition: none !important; }
}

/* v13 — a calm, channel-aware integration constellation. */
.sm4-integrations {
  padding: 98px 0 106px;
  background: #080808;
}
.sm4-integrations::before {
  opacity: .72;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
}
.sm4-integrations__stage {
  position: relative;
  min-height: 680px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-block: 1px solid rgba(255,255,255,.12);
  isolation: isolate;
}
.sm4-integrations__stage::before,
.sm4-integrations__stage::after {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  content: "";
  pointer-events: none;
  border: 1px solid rgba(242,240,236,.09);
  border-radius: 50%;
  transform: translate(-50%,-50%) rotate(-7deg);
}
.sm4-integrations__stage::before { width: min(960px,78%); height: 430px; }
.sm4-integrations__stage::after { width: min(1160px,92%); height: 570px; border-color: rgba(255,40,40,.12); transform: translate(-50%,-50%) rotate(5deg); }

.sm4-integrations__copy {
  position: relative;
  z-index: 2;
  width: min(620px,56%);
  padding: 44px 42px 40px;
  text-align: center;
  background: radial-gradient(circle at 50% 8%,rgba(255,40,40,.09),transparent 44%),#080808;
}
.sm4-integrations__copy::before,
.sm4-integrations__copy::after {
  position: absolute;
  top: 50%;
  width: 50px;
  height: 1px;
  content: "";
  background: linear-gradient(90deg,transparent,rgba(255,40,40,.66));
}
.sm4-integrations__copy::before { right: 100%; }
.sm4-integrations__copy::after { left: 100%; transform: rotate(180deg); }
.sm4-integrations__copy .sm4-label { justify-content: center; color: #c7c2bb; }
body:not(.onon-home) .onon-inner.sm4 .sm4-integrations__copy h2 {
  max-width: none;
  margin-top: 24px;
  color: #f2f0ec;
  font-size: clamp(34px,3.65vw,52px) !important;
  line-height: 1 !important;
  letter-spacing: -.055em !important;
}
.sm4-integrations__copy h2 strong { color: var(--sm-red); font-weight: 780; }
.sm4-integrations__copy > p:not(.sm4-label) {
  max-width: 590px;
  margin: 25px auto 0;
  color: #b1aca5;
  font-size: 15px;
  line-height: 1.72;
}
.sm4-integrations__copy > small {
  display: block;
  max-width: 500px;
  margin: 17px auto 0;
  color: #716d68;
  font-size: 11px;
  line-height: 1.55;
}

.sm4-integrations__orbit {
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 0;
  margin: 0;
  list-style: none;
  pointer-events: none;
}
.sm4-app {
  --app-color: #262626;
  --app-rgb: 255,255,255;
  position: absolute;
  width: 106px;
  display: grid;
  justify-items: center;
  gap: 10px;
  color: #aaa59f;
  outline: 0;
  pointer-events: auto;
  transition: color .35s ease,transform .55s var(--sm-ease);
}
.sm4-app > span {
  position: relative;
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 23px;
  color: #fff;
  background: var(--app-color);
  box-shadow: 0 14px 30px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.18);
  transition: box-shadow .55s var(--sm-ease),transform .55s var(--sm-ease),filter .4s ease;
}
.sm4-app > span::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(135deg,rgba(255,255,255,.22),transparent 38%);
}
.sm4-app > span i { position: relative; z-index: 1; font-size: 31px; }
.sm4-app > b {
  font-size: 11px;
  font-weight: 750;
  line-height: 1;
  letter-spacing: .035em;
  opacity: .7;
  transition: opacity .35s ease,color .35s ease;
}
.sm4-app.is-glowing,
.sm4-app:hover,
.sm4-app:focus-visible { color: #f2f0ec; transform: translateY(-5px); }
.sm4-app.is-glowing > span,
.sm4-app:hover > span,
.sm4-app:focus-visible > span {
  filter: saturate(1.08);
  box-shadow: 0 0 0 8px rgba(var(--app-rgb),.09),0 18px 48px rgba(var(--app-rgb),.3),inset 0 1px rgba(255,255,255,.25);
  transform: scale(1.055);
}
.sm4-app:hover > b,
.sm4-app:focus-visible > b,
.sm4-app.is-glowing > b { opacity: 1; }
.sm4-app:focus-visible > span { outline: 3px solid #f2f0ec; outline-offset: 5px; }

.sm4-app--messenger { --app-color: #087fff; --app-rgb: 8,127,255; }
.sm4-app--instagram { --app-color: radial-gradient(circle at 32% 104%,#ffd879 0 9%,#fd5949 35%,#d6249f 63%,#285aeb 100%); --app-rgb: 214,36,159; }
.sm4-app--facebook { --app-color: #0866ff; --app-rgb: 8,102,255; }
.sm4-app--tiktok { --app-color: #111; --app-rgb: 255,255,255; }
.sm4-app--tiktok > span i { text-shadow: -2px 0 #25f4ee,2px 0 #fe2c55; }
.sm4-app--youtube { --app-color: #f00; --app-rgb: 255,0,0; }
.sm4-app--linkedin { --app-color: #0a66c2; --app-rgb: 10,102,194; }
.sm4-app--whatsapp { --app-color: #25d366; --app-rgb: 37,211,102; }
.sm4-app--whatsapp > span { color: #07150d; }
.sm4-app--pinterest { --app-color: #e60023; --app-rgb: 230,0,35; }

.sm4-app.is-pos-1 { top: 62px; left: 4.5%; transform: rotate(-5deg); }
.sm4-app.is-pos-2 { top: 24px; left: 31%; transform: rotate(3deg); }
.sm4-app.is-pos-3 { top: 70px; right: 5%; transform: rotate(5deg); }
.sm4-app.is-pos-4 { top: 284px; left: 1%; transform: rotate(4deg); }
.sm4-app.is-pos-5 { top: 302px; right: 1%; transform: rotate(-4deg); }
.sm4-app.is-pos-6 { bottom: 56px; left: 10%; transform: rotate(5deg); }
.sm4-app.is-pos-7 { bottom: 22px; left: 45%; transform: rotate(-3deg); }
.sm4-app.is-pos-8 { right: 11%; bottom: 64px; transform: rotate(-5deg); }
.sm4-app.is-pos-1.is-glowing,.sm4-app.is-pos-1:hover,.sm4-app.is-pos-1:focus-visible,
.sm4-app.is-pos-2.is-glowing,.sm4-app.is-pos-2:hover,.sm4-app.is-pos-2:focus-visible,
.sm4-app.is-pos-3.is-glowing,.sm4-app.is-pos-3:hover,.sm4-app.is-pos-3:focus-visible,
.sm4-app.is-pos-4.is-glowing,.sm4-app.is-pos-4:hover,.sm4-app.is-pos-4:focus-visible,
.sm4-app.is-pos-5.is-glowing,.sm4-app.is-pos-5:hover,.sm4-app.is-pos-5:focus-visible,
.sm4-app.is-pos-6.is-glowing,.sm4-app.is-pos-6:hover,.sm4-app.is-pos-6:focus-visible,
.sm4-app.is-pos-7.is-glowing,.sm4-app.is-pos-7:hover,.sm4-app.is-pos-7:focus-visible,
.sm4-app.is-pos-8.is-glowing,.sm4-app.is-pos-8:hover,.sm4-app.is-pos-8:focus-visible { transform: translateY(-5px) rotate(0); }

@media (max-width: 1100px) {
  .sm4-integrations__stage { min-height: 640px; }
  .sm4-integrations__copy { width: min(560px,61%); padding-inline: 30px; }
  .sm4-app { width: 92px; }
  .sm4-app > span { width: 68px; height: 68px; border-radius: 20px; }
  .sm4-app > span i { font-size: 27px; }
  .sm4-app.is-pos-2 { left: 29%; }
  .sm4-app.is-pos-7 { left: 44%; }
}

@media (max-width: 767px) {
  .sm4-integrations { padding: 76px 0 82px; }
  .sm4-integrations__stage { min-height: 0; display: block; overflow: visible; padding: 48px 0 42px; }
  .sm4-integrations__stage::before,
  .sm4-integrations__stage::after,
  .sm4-integrations__copy::before,
  .sm4-integrations__copy::after { display: none; }
  .sm4-integrations__copy { width: 100%; padding: 0 5px; background: transparent; }
  body:not(.onon-home) .onon-inner.sm4 .sm4-integrations__copy h2 { margin-top: 20px; font-size: 32px !important; line-height: 1.04 !important; }
  .sm4-integrations__copy > p:not(.sm4-label) { margin-top: 21px; font-size: 15px; line-height: 1.65; }
  .sm4-integrations__copy > small { margin-top: 15px; font-size: 11px; }
  .sm4-integrations__orbit {
    position: static;
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 24px 8px;
    margin-top: 42px;
  }
  .sm4-app,
  .sm4-app.is-pos-1,.sm4-app.is-pos-2,.sm4-app.is-pos-3,.sm4-app.is-pos-4,
  .sm4-app.is-pos-5,.sm4-app.is-pos-6,.sm4-app.is-pos-7,.sm4-app.is-pos-8 {
    position: static;
    width: auto;
    transform: none;
  }
  .sm4-app > span { width: 58px; height: 58px; border-radius: 17px; }
  .sm4-app > span i { font-size: 24px; }
  .sm4-app > b { max-width: 76px; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
  .sm4-app.is-glowing,.sm4-app:hover,.sm4-app:focus-visible,
  .sm4-app.is-pos-1.is-glowing,.sm4-app.is-pos-1:hover,.sm4-app.is-pos-1:focus-visible,
  .sm4-app.is-pos-2.is-glowing,.sm4-app.is-pos-2:hover,.sm4-app.is-pos-2:focus-visible,
  .sm4-app.is-pos-3.is-glowing,.sm4-app.is-pos-3:hover,.sm4-app.is-pos-3:focus-visible,
  .sm4-app.is-pos-4.is-glowing,.sm4-app.is-pos-4:hover,.sm4-app.is-pos-4:focus-visible,
  .sm4-app.is-pos-5.is-glowing,.sm4-app.is-pos-5:hover,.sm4-app.is-pos-5:focus-visible,
  .sm4-app.is-pos-6.is-glowing,.sm4-app.is-pos-6:hover,.sm4-app.is-pos-6:focus-visible,
  .sm4-app.is-pos-7.is-glowing,.sm4-app.is-pos-7:hover,.sm4-app.is-pos-7:focus-visible,
  .sm4-app.is-pos-8.is-glowing,.sm4-app.is-pos-8:hover,.sm4-app.is-pos-8:focus-visible { transform: translateY(-3px); }
}

@media (max-width: 380px) {
  .sm4-integrations__orbit { gap-inline: 4px; }
  .sm4-app > span { width: 53px; height: 53px; border-radius: 16px; }
  .sm4-app > span i { font-size: 22px; }
  .sm4-app > b { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .sm4-app,
  .sm4-app > span,
  .sm4-app > b { transition: none !important; }
  .sm4-app.is-glowing,
  .sm4-app:hover,
  .sm4-app:focus-visible,
  .sm4-app[class*="is-pos-"] { transform: none !important; }
  .sm4-app.is-glowing > span,
  .sm4-app:hover > span,
  .sm4-app:focus-visible > span { box-shadow: 0 14px 30px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.18); transform: none !important; }
}

/* v14 — keep the real-profile phone centred and fully contained at every width. */
.sm4-hero:has(.sm4-phone-scene){overflow:hidden}
.sm4-phone-scene{width:100%;max-width:700px;margin-inline:auto;overflow:visible}
.sm4-phone-scene__halo{top:50%;left:50%;width:min(560px,100%);animation:none;transform:translate(-50%,-50%)}
.sm4-phone-scene__flag{top:34px;left:50%;z-index:9;max-width:calc(100% - 32px);padding:8px 12px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(10,10,10,.88);line-height:1.2;white-space:nowrap;transform:translateX(-50%);backdrop-filter:blur(10px)}
.sm4-phone:has(.sm4-phone__screen--profiles){width:min(350px,calc(100% - 64px));max-width:100%}
@media(max-width:1100px){.sm4-phone-scene{min-height:730px}.sm4-phone-scene__flag{top:22px}.sm4-phone:has(.sm4-phone__screen--profiles){width:min(350px,calc(100% - 80px))}}
@media(max-width:767px){.sm4-hero:has(.sm4-phone-scene) .sm4-hero__grid{gap:36px;padding-bottom:56px}.sm4-phone-scene{min-height:0;padding:58px 16px 0;overflow:visible}.sm4-phone-scene__halo{width:min(500px,145vw)}.sm4-phone-scene__flag{top:12px;max-width:calc(100% - 24px);font-size:9px}.sm4-phone:has(.sm4-phone__screen--profiles){width:min(320px,100%);max-height:none}.sm4-phone:has(.sm4-phone__screen--profiles) .sm4-phone__screen{border-radius:36px}}
@media(max-width:380px){.sm4-phone-scene{padding-inline:7px}.sm4-phone:has(.sm4-phone__screen--profiles){width:min(306px,100%);border-radius:44px}}