/* Page-scoped extension of RND's existing tech/service design system.
   Existing imagery, fonts, header, footer and emerald CTA remain shared. */
main.social-studio {
  --social-ink: #e9b9ff; --social-purple: #8b5cf6; --social-pink: #ec4899;
  --social-coral: #fb967f; --social-muted: #b9c2d2; --social-line: rgba(174,181,207,.18);
  color: #f3f5fa; background: var(--tech-bg); --social-grad: linear-gradient(100deg,#8b5cf6,#ec4899 56%,#fb967f);
}
main.social-studio > section:not(.hero) { background: var(--tech-bg) !important; border-top: 1px solid var(--social-line); }
main.social-studio > section:nth-of-type(even):not(.hero) { background: var(--tech-bg-2) !important; }
.social-studio h1,.social-studio h2,.social-studio h3,.social-studio strong { color: #f3f5fa; }
.social-studio h2 { max-width: 24ch; margin: 0 0 24px; font-size: clamp(1.9rem,3.3vw,2.8rem); }
.social-studio h2::after { display: none; }
.social-studio p,.social-studio li { color: var(--social-muted); }
.social-studio a:not(.btn) { color: #ebbdff; }
.social-studio a:not(.btn):hover { color: #fff; }
.social-studio .btn.ghost { color: #f3f5fa; border-color: #607087; }
.social-studio .btn.ghost:hover { background: rgba(255,255,255,.08); }
.social-studio .btn { font-size: .88rem; padding-inline: 22px; }
.social-studio :is(button,a,summary):focus-visible { outline: 3px solid #ecb9ff; outline-offset: 5px; }
.social-studio ::selection { background: #653990; color: #fff; }
.social-studio :is(button,input) { font: inherit; }
.social-studio figure { margin: 0; }
.social-studio section[id] { scroll-margin-top: 130px; }
.social-studio .s-heading { margin-bottom: 40px; }
.social-studio .s-heading p { max-width: 67ch; margin: 0; font-size: 1.05rem; }
.social-studio .s-eyebrow { color: #e6b9f9; font-size: .7rem; letter-spacing: .14em; font-weight: 700; margin: 0 0 22px; }
main.social-studio > .s-hero { padding-top: clamp(48px,6vw,88px); padding-bottom: clamp(48px,6vw,80px); background: radial-gradient(ellipse at 85% 45%,rgba(139,92,246,.14),transparent 55%),var(--hero-dark); }
.social-studio .hero::before { background: radial-gradient(ellipse at center,rgba(236,72,153,.08),transparent 65%); left: 45%; width: 60%; height: 100%; }
.social-studio .hero::after { opacity: .25; }
/* Existing shader is restrained behind the studio; never behind video controls. */
.social-studio .hero > #hero-shader { opacity: .18; }
.social-studio .hero > .hero-scrim { background: linear-gradient(90deg,#0d1b2ae8,#0d1b2a88); }
.s-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.social-studio .s-hero h1 { font-size: clamp(2.3rem,4.05vw,3.65rem); line-height: 1.12; max-width: 18ch; margin-bottom: 26px; letter-spacing: -.035em; }
.social-studio .s-hero .lede { font-size: 1.02rem; line-height: 1.75; color: #bdc8d8; }
.social-studio .s-hero :is(h1,.lede,.cta-row) { animation: none; }
.s-studio { position: relative; border: 1px solid #49516a; border-radius: var(--radius-lg); background: #101a2a; padding: 18px; box-shadow: 0 28px 65px -28px #000b; isolation: isolate; }
.s-studio::before { content: ''; position: absolute; z-index: -1; inset: -35px; background: radial-gradient(ellipse,rgba(236,72,153,.19),rgba(139,92,246,.12) 45%,transparent 72%); pointer-events: none; }
.s-studio-top,.s-panel-head,.s-editor-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: .62rem; letter-spacing: .08em; }
.s-studio-top { padding-bottom: 18px; color: #e2d9f4; }
.s-live-dot { color: #b5c2d0; font-size: .56rem; }
.s-live-dot::before { content: ''; display: inline-block; width: 5px; height: 5px; background: #cfa0ff; border-radius: 50%; margin-right: 6px; }
.s-studio-body { display: grid; grid-template-columns: .68fr 1fr; gap: 18px; align-items: center; }
.s-studio-side { display: grid; gap: 18px; }
.s-mini-post { background: #1d2639; border: 1px solid var(--social-line); border-radius: var(--radius-sm); overflow: hidden; transform: rotate(-4deg); }
.s-mini-post > span,.s-mini-post > b { display: block; font-size: .57rem; padding: 9px 10px; }
.s-mini-post img { width: 100%; aspect-ratio: 1.15; object-fit: cover; }
.s-mini-post > b { font-size: .67rem; }
.s-mini-plan { padding: 12px; border: 1px solid var(--social-line); border-radius: 8px; font-size: .5rem; background: #171f32; }
.s-mini-plan > span { display: block; color: #d6cbe9; margin-bottom: 10px; }
.s-mini-plan i { display: block; font-style: normal; padding: 4px 7px; margin: 5px 0; background: #523471; border-radius: 3px; color: #f8e8ff; }
.s-mini-plan i:nth-child(3) { background: #652d53; margin-left: 15px; }
.s-mini-plan i:nth-child(4) { background: #613b38; margin-left: 5px; }
.s-platform-notes { font-size: .56rem; color: #b5bfd2; display: grid; gap: 4px; }
.s-reel { border-radius: 18px; padding: 6px; background: #060d16; border: 1px solid #596078; box-shadow: 0 12px 30px -15px #000; }
.s-reel-caption { display: block; padding: 9px 2px 4px; text-align: center; font-size: .49rem; color: #c4bfd4; letter-spacing: .05em; }
.s-video { position: relative; aspect-ratio: 9/16; overflow: hidden; border-radius: 12px; background: #05080e; }
.s-play { display: block; width: 100%; height: 100%; position: relative; padding: 0; border: 0; background: #05080e; color: #fff; cursor: pointer; }
.s-play img { width: 100%; height: 100%; object-fit: cover; }
.s-play::after { content: ''; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent,#000b); pointer-events: none; }
.s-play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; border: 1px solid #ffffffa8; background: #0a1420cc; box-shadow: 0 6px 20px -6px #000; transition: background .2s; z-index: 1; }
.s-play:hover .s-play-icon { background: #714294; }
.s-video-label { position: absolute; bottom: 18px; left: 10px; right: 10px; text-align: center; font-size: .72rem; font-weight: 700; z-index: 1; }
.s-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.s-video .s-video-fallback { position: absolute; bottom: 0; left: 0; right: 0; background: #101725; padding: 4px 8px; font-size: .62rem; text-align: center; }
.s-studio-bottom { margin-top: 16px; border-top: 1px solid var(--social-line); padding-top: 12px; font-size: .53rem; color: #c7c2d8; }
.s-studio-bottom > div:last-child { display: flex; justify-content: space-between; }
.s-mini-tracks { display: flex; gap: 4px; height: 17px; margin: 9px 0; }
.s-mini-tracks i { flex: 1; border-radius: 3px; background: #78529b; }
.s-mini-tracks i:nth-child(2n) { background: #ab507e; flex: .6; }
.s-mini-tracks i:last-child { background: #b97968; }
.social-studio .s-demo-note { font-size: .72rem; line-height: 1.65; color: #afb8cb; margin: 14px 0 0; }
.s-studio > .s-demo-note { font-size: .58rem; text-align: center; }
main.social-studio > .s-platform-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 38px; padding-top: 22px; padding-bottom: 22px; background: #0a1120; font-size: .83rem; color: #d9d6e6; font-weight: 600; }
.s-platform-strip span { display: flex; align-items: center; gap: 14px; }
.s-platform-strip span::before { content: ''; width: 4px; height: 4px; background: #cd98f6; border-radius: 50%; }
.s-services { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.s-service { border: 1px solid var(--social-line); padding: 30px; border-radius: var(--radius-md); background: radial-gradient(ellipse at top left,#8b5cf610,transparent 70%),#ffffff02; }
.s-service:nth-child(3n+2) { background: radial-gradient(ellipse at top left,#ec489914,transparent 70%),#ffffff02; }
.s-service:nth-child(3n+3) { background: radial-gradient(ellipse at top left,#fb967f12,transparent 70%),#ffffff02; }
.s-service svg { color: #d1a7ff; }
.s-service:nth-child(3n+2) svg { color: #f4a5cd; }
.s-service:nth-child(3n+3) svg { color: #ffc0aa; }
.s-service h3 { margin-top: 24px; font-size: 1.08rem; line-height: 1.4; }
.s-service p { margin: 0; font-size: .92rem; }
.social-studio .s-process { list-style: none; padding: 0; margin: 56px 0 0; display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); position: relative; gap: 20px; }
.s-process::before { content: ''; position: absolute; top: 24px; left: 24px; right: 24px; height: 1px; background: var(--social-grad); }
.s-process li { position: relative; margin: 0; }
.s-process li > span { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #bd9be2; background: #161c2e; color: #e6c5ff; border-radius: 50%; font-family: var(--font-mono); font-size: .86rem; }
.s-process li:nth-child(n+4) > span { border-color: #d991a5; color: #f4bcc5; }
.s-process h3 { font-size: .93rem; margin-top: 22px; line-height: 1.5; }
.s-loop { border: 1px solid #775676; border-top: 0; border-radius: 0 0 18px 18px; margin: 24px 24px 0; padding: 14px 16px; display: flex; justify-content: center; gap: 12px; align-items: center; color: #d4bbdf; font-size: .84rem; }
.s-editing { display: grid; grid-template-columns: .8fr 1.5fr .65fr; gap: 30px; align-items: center; }
.s-source img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radius-md); }
.s-source > span,.s-final > span { display: block; margin-top: 16px; font-size: .61rem; letter-spacing: .08em; color: #ded2ea; }
.s-source > p { font-size: .72rem; margin-top: 8px; }
.s-editor { border: 1px solid var(--social-line); background: #111c2b; border-radius: 14px; padding: 22px; }
.s-editor-head { padding-bottom: 26px; }
.s-editor-head span { font-size: .5rem; color: #c1adc9; }
.s-timecode { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: .62rem; color: #afbacb; padding: 0 0 12px; border-bottom: 1px solid var(--social-line); }
.s-track { padding: 22px 0 0; display: flex; gap: 4px; flex-wrap: wrap; }
.s-track > span { flex: 1 1 100%; color: #bfc8d6; font-size: .5rem; margin-bottom: 6px; letter-spacing: .08em; }
.s-track-video i { height: 40px; flex: 1; border-radius: 4px; background: url('/img/marquee/02.webp') center/cover; border: 1px solid #9c78c4; }
.s-track-video i:nth-child(2n) { background-image: url('/img/marquee/03.webp'); flex: .7; }
.s-track b { font-size: .6rem; font-weight: 500; padding: 6px 12px; border-radius: 4px; background: #4c2e62; color: #f1d8ff; }
.s-track-motion b { background: #533342; color: #fad6d4; }
.s-wave { width: 100%; height: 25px; background: repeating-linear-gradient(90deg,transparent 0 3px,#8faed0 3px 4px,transparent 4px 7px,#8faed0 7px 9px); mask-image: repeating-linear-gradient(115deg,transparent 0 4px,#000 7px 16px,transparent 20px 23px); opacity: .65; }
.s-editor > p { font-size: .75rem; margin: 25px 0 0; }
.s-flow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 45px; color: #d4cce0; font-size: .63rem; letter-spacing: .07em; }
.s-flow span { display: flex; align-items: center; gap: 12px; }
.s-flow span + span::before { content: ''; height: 1px; width: 16px; background: #b37bba; }
.s-adapt-grid,.s-split { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.s-format-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.s-format-buttons button { color: #d8d8e5; background: #101b2c; border: 1px solid #5b5872; border-radius: var(--radius-sm); min-height: 80px; padding: 14px; text-align: left; font-size: .85rem; cursor: pointer; }
.s-format-buttons button span { display: block; color: #b7afc9; font-size: .65rem; margin-top: 6px; }
.s-format-buttons button[aria-pressed="true"] { background: #352449; border-color: #dcafff; color: #fff; }
.s-format-buttons button:hover { border-color: #d3a4f4; }
.s-format-preview { display: grid; grid-template-columns: 1fr .75fr; align-items: end; gap: 22px; min-height: 380px; }
.s-format-crop { width: 100%; aspect-ratio: 9/16; border-radius: 16px; border: 5px solid #253149; overflow: hidden; box-shadow: 0 15px 30px -12px #0006; transition: aspect-ratio .35s ease; }
.s-format-crop img { width: 100%; height: 100%; object-fit: cover; }
.s-format-info b { font-size: .8rem; }
.s-format-info p { font-size: .8rem; margin: 10px 0 0; }
.s-split .s-heading { margin-bottom: 0; }
.s-calendar,.s-dashboard,.s-inbox { background: #111d2e; border: 1px solid #42465f; border-radius: var(--radius-md); padding: 26px; }
.s-panel-head { padding-bottom: 22px; border-bottom: 1px solid var(--social-line); }
.s-panel-head span { color: #e8bafa; font-size: .55rem; text-align: right; }
.s-calendar-row { display: grid; grid-template-columns: 100px 1fr; gap: 15px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--social-line); }
.s-calendar-row:last-child { border-bottom: 0; padding-bottom: 0; }
.s-calendar-row > span { font-size: .73rem; color: #bec7d9; padding-top: 5px; }
.s-calendar-row > div { border-left: 1px solid #c596f4; padding: 0 0 0 14px; }
.s-calendar-row:nth-child(2n) > div { border-left-color: #ee9fbd; }
.s-calendar-row b { font-size: .52rem; color: #e8bafa; }
.s-calendar-row strong { display: block; font-size: .79rem; font-weight: 500; margin: 3px 0; }
.s-calendar-row small { font-size: .5rem; color: #acb5c7; }
.s-metrics { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 24px; gap: 20px 14px; }
.s-metrics > div { border-bottom: 1px solid var(--social-line); }
.s-metrics span { display: block; font-size: .68rem; color: #c0c9d9; }
.s-metrics b { font-size: 1.7rem; font-weight: 400; color: #b494ca; font-variant-numeric: tabular-nums; }
.s-top-content { border-top: 1px solid var(--social-line); margin-top: 24px; padding-top: 18px; }
.s-top-content b { display: block; font-size: .62rem; margin-bottom: 8px; }
.s-top-content span { display: block; font-size: .74rem; color: #b5bfd2; }
.s-projects { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 28px; align-items: start; }
.s-project { min-width: 0; }
.s-project:nth-child(2) { margin-top: 56px; }
.s-project:nth-child(3) { margin-top: 100px; }
.s-project > img { width: 100%; aspect-ratio: 9/16; object-fit: cover; border-radius: 14px; }
.s-project > div:not(.s-video) { padding: 24px 0 0; }
.s-project .s-eyebrow { display: block; font-size: .59rem; margin-bottom: 12px; }
.s-project h3 { font-size: 1.2rem; margin: 0 0 12px; }
.s-project p { font-size: .86rem; }
.s-project a { font-size: .81rem; }
.s-work-link { margin-top: 36px; }
.s-message { padding: 22px; background: #212a3f; border-radius: 14px 14px 14px 2px; margin-top: 25px; max-width: 90%; }
.s-message small { font-size: .55rem; letter-spacing: .06em; color: #d5b6e6; }
.s-message p { margin: 8px 0 0; font-size: .86rem; color: #e0e2eb; }
.s-message.s-reply { margin-left: auto; background: #332840; border-radius: 14px 14px 2px 14px; }
.social-studio .s-collaboration { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(7,1fr); gap: 10px; }
.s-collaboration li { padding: 20px 12px; border-top: 1px solid #8f75a5; margin: 0; }
.s-collaboration li > span { font: .72rem var(--font-mono); display: block; margin-bottom: 14px; color: #c4a4df; }
.s-collaboration b { font-size: .76rem; line-height: 1.5; display: block; color: #dfe3ed; }
.s-collaboration li.s-approval { background: #382647; border: 1px solid #d2a5f6; border-radius: 8px; }
.social-studio .s-approval-note { color: #d7c1e5; margin: 24px 0 0; font-size: .88rem; }
main.social-studio > section.s-scope { background: radial-gradient(ellipse at 80% 100%,#8b5cf615,transparent 60%),var(--tech-bg-2) !important; border-top-color: var(--social-line); }
.social-studio .s-modules { display: flex; gap: 12px; flex-wrap: wrap; margin: 35px 0; }
.s-modules span { border: 1px solid #847096; padding: 12px 18px; border-radius: 8px; font-size: .72rem; color: #e3cfef; }
.s-reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 70px; }
.s-reasons article { border-top: 1px solid #6a526f; padding-top: 22px; }
.s-reasons h3 { margin: 0 0 12px; }
.s-reasons p { font-size: .95rem; margin-bottom: 0; }
.social-studio .faq details { max-width: none; border-color: var(--social-line); }
.social-studio .faq summary { color: #f0eaf4; padding-block: 25px; }
.social-studio .faq summary:hover { color: #ebbdff; }
.social-studio .faq summary::after { border-color: #d1a3eb; }
.social-studio .faq details p { padding-bottom: 8px; max-width: 75ch; }
main.social-studio > section.s-final-cta { background: radial-gradient(ellipse at 90% 90%,#fb967f18,transparent 55%),radial-gradient(ellipse at 70% 50%,#ec489915,transparent 65%),radial-gradient(ellipse at 10% 10%,#8b5cf626,transparent 60%),#0d1525 !important; border-color: #675073; }
.social-studio .s-final-cta h2 { font-size: clamp(2.2rem,4.5vw,3.6rem); max-width: 24ch; }
.social-studio .s-final-cta .s-flow { justify-content: flex-start; margin-top: 65px; color: #cbb4dc; }
main.social-studio > section.s-scope h2,main.social-studio > section.s-final-cta h2 { max-width: 24ch; }
main.social-studio > section:has(.cta-row) p { color: var(--social-muted); }
main.social-studio > section:has(.cta-row) .s-eyebrow { color: #e6b9f9; }
main.social-studio > section:has(.cta-row) .btn.ghost { border-color: #64708a; }
@media (max-width:1100px) {
 .s-hero-grid { gap: 30px; }
 .s-studio { padding: 14px; }
 .s-studio-top { font-size: .53rem; }
 .s-live-dot { display: none; }
 .s-studio-body { gap: 12px; }
 .s-split,.s-adapt-grid { gap: 40px; }
 .s-editing { gap: 20px; }
 .s-editor { padding: 16px; }
 .s-services { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .s-collaboration { column-gap: 4px; }
 .s-collaboration li { padding-inline: 8px; }
}
@media (max-width:800px) {
 .s-hero-grid { grid-template-columns: 1fr; gap: 42px; }
 .social-studio .s-hero h1 { font-size: clamp(2.3rem,6vw,3.4rem); max-width: 22ch; }
 .s-studio { max-width: 480px; width: 100%; justify-self: center; }
 .s-studio-top { font-size: .62rem; }
 .s-live-dot { display: block; }
 .s-studio-body { gap: 22px; }
 .s-studio-side { gap: 24px; }
 .social-studio .s-process { grid-template-columns: 1fr; gap: 0; margin-top: 32px; }
 .s-process::before { top: 24px; bottom: 24px; right: auto; left: 23px; height: auto; width: 1px; background: linear-gradient(#8b5cf6,#ec4899,#fb967f); }
 .s-process li { display: flex; align-items: center; gap: 24px; padding-bottom: 28px; }
 .s-process li:last-child { padding-bottom: 0; }
 .s-process h3 { margin: 0; font-size: 1rem; }
 .s-loop { margin-inline: 23px 0; justify-content: flex-start; border-right: 0; border-radius: 0 0 0 14px; padding-left: 18px; }
 .s-editing { grid-template-columns: 1fr 1fr; }
 .s-editor { grid-column: 1/-1; grid-row: 2; }
 .s-source { align-self: start; }
 .s-source img { aspect-ratio: 9/16; }
 .s-source > p { font-size: .67rem; }
 .s-split,.s-adapt-grid { grid-template-columns: 1fr; gap: 35px; }
 .s-format-preview { max-width: 460px; width: 100%; min-height: 0; justify-self: center; }
 .s-format-crop { max-height: 420px; }
 .s-projects { gap: 18px; }
 .s-project:nth-child(2),.s-project:nth-child(3) { margin-top: 0; }
 .social-studio .s-collaboration { grid-template-columns: repeat(4,1fr); row-gap: 22px; }
 .s-reasons { gap: 28px; }
}
@media (max-width:520px) {
 main.social-studio > section { padding-top: 56px; padding-bottom: 56px; }
 main.social-studio > .s-platform-strip { gap: 14px 23px; font-size: .7rem; }
 .social-studio .s-heading { margin-bottom: 30px; }
 .social-studio .s-heading p { font-size: .96rem; }
 .social-studio .s-hero .lede { font-size: .96rem; }
 .social-studio .s-hero h1 { font-size: clamp(2rem,8.5vw,2.75rem); }
 .s-studio-top { font-size: .51rem; }
 .s-live-dot { font-size: .46rem; }
 .s-studio-body { gap: 15px; }
 .s-studio-side { gap: 13px; }
 .s-mini-post > span,.s-mini-post > b { padding: 7px; font-size: .48rem; }
 .s-mini-plan { padding: 8px; font-size: .43rem; }
 .s-platform-notes { font-size: .46rem; }
 .s-reel-caption { font-size: .42rem; }
 .s-video-label { font-size: .61rem; }
 .s-play-icon { width: 46px; height: 46px; }
 .s-services { grid-template-columns: 1fr; gap: 14px; }
 .s-service { padding: 26px; }
 .s-service h3 { margin-top: 18px; }
 .s-format-buttons button { font-size: .78rem; }
 .s-format-preview { grid-template-columns: 1fr .65fr; gap: 20px; }
 .s-format-info p { font-size: .75rem; }
 .s-calendar,.s-dashboard,.s-inbox { padding: 20px; }
 .s-calendar-row { grid-template-columns: 80px 1fr; gap: 8px; }
 .s-calendar-row > span { font-size: .67rem; }
 .s-panel-head { font-size: .55rem; gap: 10px; }
 .s-panel-head span { font-size: .46rem; }
 .s-metrics { grid-template-columns: repeat(2,1fr); }
 .s-projects { grid-template-columns: 1fr; gap: 46px; }
 .s-project { max-width: 340px; margin-inline: auto; width: 100%; }
 .social-studio .s-collaboration { grid-template-columns: 1fr 1fr; }
 .s-collaboration li { padding: 18px 14px; }
 .s-reasons { grid-template-columns: 1fr; }
 .s-message { max-width: 96%; padding: 17px; }
 .s-modules span { font-size: .62rem; padding: 10px 14px; }
 .s-flow { gap: 10px; font-size: .5rem; }
 .s-flow span { gap: 10px; }
 .s-flow span + span::before { width: 10px; }
}
@media (prefers-reduced-motion:reduce) { .social-studio *, .social-studio *::before, .social-studio *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
/* Use the existing darker emerald token for white-label contrast. */
.social-studio .btn:not(.ghost) { background: var(--accent-hover); border-color: var(--accent-hover); }
.social-studio .btn:not(.ghost):hover { background: #066448; border-color: #066448; }
/* Readable action labels and demo disclosure, including on narrow screens. */
.social-studio .s-video-label { font-size: .8rem; }
.social-studio .s-demo-note { font-size: .78rem; }
.social-studio .s-studio > .s-demo-note { font-size: .69rem; }
.social-studio .s-panel-head span { font-size: .7rem; }
.social-studio .s-video:has(iframe) { aspect-ratio: auto; }
.social-studio .s-video iframe { height: auto; aspect-ratio: 9/16; }
.social-studio .s-video .s-video-fallback { position: static; display: grid; place-items: center; min-height: 44px; font-size: .78rem; padding: 8px; }

@media (prefers-reduced-motion:reduce) { html:has(main.social-studio) { scroll-behavior: auto; } }
.social-studio .s-calendar-row :is(b,small),
.social-studio .s-format-buttons button span,
.social-studio .s-metrics span,
.social-studio .s-modules span { font-size: .75rem; }

/* ---------- "Od ideje do objave": ulaz, signal koji putuje, povratak kroz traku (js/social.js) ---------- */
.s-process.is-anim::before { transform: scaleX(0); transform-origin: left center; transition: transform 1.3s cubic-bezier(.22,1,.36,1); }
.s-process.is-anim.is-in::before { transform: none; }
.s-process.is-anim li { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s cubic-bezier(.22,1,.36,1); }
.s-process.is-anim.is-in li { opacity: 1; transform: none; }
.s-process.is-anim.is-in li:nth-child(2) { transition-delay: .15s; }
.s-process.is-anim.is-in li:nth-child(3) { transition-delay: .3s; }
.s-process.is-anim.is-in li:nth-child(4) { transition-delay: .45s; }
.s-process.is-anim.is-in li:nth-child(5) { transition-delay: .6s; }
.s-process.is-anim.is-in li:nth-child(6) { transition-delay: .75s; }
.s-process li > span { transition: background .35s ease, box-shadow .35s ease, color .35s ease, transform .35s ease; }
.s-process li h3 { transition: color .35s ease; }
.s-process li.is-active > span { background: linear-gradient(135deg, #8b5cf6, #ec4899); border-color: transparent; color: #fff; transform: scale(1.08);
  box-shadow: 0 0 0 6px rgba(236,72,153,.14), 0 0 28px rgba(236,72,153,.45); }
.s-process li.is-active h3 { color: #fff; }
/* signal: mala svetla tacka koja klizi po liniji od koraka do koraka */
.s-signal { position: absolute; left: 0; top: 0; z-index: 3; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 4px rgba(236,72,153,.25), 0 0 18px 4px rgba(236,72,153,.7); pointer-events: none;
  opacity: 0; transition: transform .8s cubic-bezier(.65,0,.35,1), opacity .3s ease; }
.s-signal.is-on { opacity: 1; }
/* donja povratna traka: ulaz i svetlo koje prodje zdesna nalevo */
.s-loop.is-anim { opacity: 0; transform: translateY(10px); transition: opacity .6s ease 1s, transform .6s ease 1s; position: relative; overflow: hidden; }
.s-loop.is-anim.is-in { opacity: 1; transform: none; }
.s-loop.is-anim::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 30%; height: 2px; opacity: 0;
  background: linear-gradient(90deg, transparent, #fb967f, #ec4899, transparent); transform: translateX(260%); }
.s-loop.is-return::after { animation: s-return 1.6s cubic-bezier(.65,0,.35,1); }
.s-loop.is-return svg { animation: s-return-icon 1.6s cubic-bezier(.65,0,.35,1); }
@keyframes s-return { 0% { opacity: 0; transform: translateX(260%); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(-100%); } }
@keyframes s-return-icon { 0% { transform: none; } 60%, 100% { transform: rotate(-360deg); } }
@media (max-width: 719px) {
  .s-process.is-anim::before { transform: scaleY(0); transform-origin: center top; }
  .s-process.is-anim.is-in::before { transform: none; }
}